/* Phone shell for the app replicas (public/appdemo.js). The device is laid
   out at 412 x 915 logical px and scaled to its frame. */
.appdemo { position: relative; width: min(300px, 78vw); border-radius: 46px; padding: 10px; box-sizing: content-box;
  background: linear-gradient(160deg, #2a2730, #0b0a0e); box-shadow: 0 0 0 1px #34303b, 0 60px 120px -40px rgba(255,107,53,.45), 0 30px 60px -20px #000; z-index: 1; }
.appdemo .ad-scale { position: absolute; left: 10px; top: 10px; width: 412px; height: 915px; transform-origin: 0 0; }
.ad-device { position: relative; width: 412px; height: 915px; overflow: hidden; border-radius: 40px; background: #FAFAFA; color: #1C1B1F;
  font-family: "Inter", Roboto, system-ui, sans-serif; font-size: 14px; line-height: 1.35; -webkit-font-smoothing: antialiased; user-select: none; }
.ad-device * { box-sizing: border-box; }
.ad-status { position: absolute; z-index: 30; top: 0; left: 0; right: 0; height: 40px; padding: 12px 26px 0 30px; display: flex; justify-content: space-between; font: 600 14px "Inter", sans-serif; color: #111; pointer-events: none; }
.ad-device.dark-status .ad-status, .ad-device:has(.ad-screen.dark:last-child) .ad-status { color: #fff; }
.ad-icons { display: flex; gap: 6px; align-items: center; }
.ad-icons i { display: block; background: currentColor; }
.ad-icons .sig { width: 16px; height: 11px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.ad-icons .wifi { width: 15px; height: 11px; border-radius: 15px 15px 0 0; clip-path: polygon(50% 100%, 0 20%, 100% 20%); }
.ad-icons .bat { width: 24px; height: 11px; border-radius: 3px; }
.ad-home { position: absolute; z-index: 40; bottom: 8px; left: 50%; width: 120px; height: 4px; margin-left: -60px; border-radius: 4px; background: rgba(0,0,0,.55); pointer-events: none; }
.ad-device:has(.ad-screen.dark:last-child) .ad-home { background: rgba(255,255,255,.75); }

.ad-stage { position: absolute; inset: 0; }
.ad-screen { position: absolute; inset: 0; background: #FAFAFA; overflow: hidden; transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .38s; }
.ad-screen.dark { background: #000; color: #fff; }
.ad-screen.in-push { transform: translateX(100%); } .ad-screen.in-pop { transform: translateX(-30%); opacity: .6; } .ad-screen.in-fade { opacity: 0; }
.ad-screen.in-push.go, .ad-screen.in-pop.go, .ad-screen.in-fade.go { transform: none; opacity: 1; }
.ad-screen.out-push { transform: translateX(-30%); opacity: .6; } .ad-screen.out-pop { transform: translateX(100%); } .ad-screen.out-fade { opacity: 0; }

.ad-sheets { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.ad-sheet-wrap { position: absolute; inset: 0; }
.ad-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.32); opacity: 0; transition: opacity .35s; }
.ad-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; overflow: hidden; background: #fff; border-radius: 28px 28px 0 0; padding: 10px 20px 34px;
  transform: translateY(105%); transition: transform .42s cubic-bezier(.2,.85,.25,1); box-shadow: 0 -10px 40px rgba(0,0,0,.18); }
.ad-sheet.glass { background: rgba(255,255,255,.86); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.ad-sheet-wrap.open .ad-scrim { opacity: 1; } .ad-sheet-wrap.open .ad-sheet { transform: none; }
.ad-grab { width: 36px; height: 4px; border-radius: 4px; background: #C9C5CD; margin: 0 auto 14px; }

.ad-finger { position: absolute; z-index: 50; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.55); border: 2px solid rgba(0,0,0,.25); box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0;
  transition: transform .5s cubic-bezier(.3,.7,.2,1), opacity .2s, scale .12s; }
.ad-finger.show { opacity: 1; } .ad-finger.down { scale: .78; background: rgba(255,255,255,.8); }
.ad-pressed { filter: brightness(.9); scale: .97; transition: scale .12s, filter .12s; }

.ad-toast { position: absolute; left: 16px; right: 16px; top: 52px; background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.25);
  display: flex; gap: 12px; align-items: center; transform: translateY(-140%); transition: transform .45s cubic-bezier(.2,.9,.25,1); font-size: 14px; }
.ad-toast.in { transform: none; }
.typing::after { content: "|"; color: #FF6B35; margin-left: 1px; animation: adblink .9s steps(1) infinite; }
@keyframes adblink { 50% { opacity: 0; } }

/* ---------- App components (values from lib/theme.dart) ---------- */
.ad-device .ms { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; display: inline-block; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.ad-device .ms.f { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.ad-device img, .ad-device video { display: block; object-fit: cover; }
.ad-pad { padding: 0 16px; }
.ad-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #FF6B35; color: #fff; border-radius: 16px; padding: 14px 24px; font: 500 14px Inter; border: 0; }
.ad-btn.out { background: transparent; color: #FF6B35; border: 1.5px solid #FF6B35; padding: 12.5px 22px; }
.ad-btn.tonal { background: #F0F0F0; color: #222; border-radius: 999px; }
.ad-btn.block { display: flex; width: 100%; }
.ad-btn.sm { padding: 7px 14px; font-size: 13px; border-radius: 999px; }
.ad-pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 8px; font: 700 12px Inter; background: #EBEBEB; white-space: nowrap; }
.ad-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 16px; padding: 7px 14px; font: 500 13px Inter; background: #F5F5F5; border: 1.5px solid #E0E0E0; white-space: nowrap; }
.ad-chip.sel { background: #FFE5DC; border-color: transparent; font-weight: 600; }
.ad-open { background: #DDF3E6; color: #1E8449; border-radius: 999px; padding: 6px 10px; font: 700 11px Inter; }
.ad-gas { display: inline-flex; align-items: center; gap: 3px; background: #3FA86B; color: #fff; font: 900 13px Inter; border-radius: 999px; padding: 4px 9px; }
.ad-gas.d { font-size: 11.5px; padding: 2px 7px; }
.ad-star { display: inline-flex; align-items: center; gap: 2px; background: #FFB300; color: #1A1A1A; font: 800 11.5px Inter; border-radius: 999px; padding: 2px 7px; }
.ad-gas .ms, .ad-star .ms { font-size: 15px; }
.ad-card { background: #fff; border-radius: 20px; border: 1px solid #E0E0E0; }
.ad-muted { color: #2B2B2B; } .ad-grey { color: #8A8A8A; }
.ad-h1 { font: 700 28px Inter; letter-spacing: -.2px; } .ad-h2 { font: 700 22px Inter; } .ad-h3 { font: 700 16px Inter; }
.ad-appbar { height: 56px; margin-top: 40px; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 4px; font: 600 20px Inter; }
.ad-appbar .ms { width: 48px; text-align: center; }
.ad-scroll { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }
.ad-snack { position: absolute; left: 16px; right: 16px; bottom: 96px; background: #F5F5F5; color: #111; border-radius: 12px; padding: 14px 16px; font: 500 14px Inter; box-shadow: 0 6px 20px rgba(0,0,0,.18); transform: translateY(30px); opacity: 0; transition: .35s; z-index: 25; }
.ad-snack.in { transform: none; opacity: 1; }
.ad-field { border-bottom: 1px solid #8A8A8A; padding: 18px 0 8px; position: relative; font: 400 16px Inter; min-height: 52px; }
.ad-field label { position: absolute; top: 0; left: 0; font: 400 12px Inter; color: #2B2B2B; }
.ad-seg { display: flex; border: 1px solid #8A8A8A; border-radius: 999px; overflow: hidden; height: 40px; }
.ad-seg > span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 13px Inter; border-left: 1px solid #8A8A8A; }
.ad-seg > span:first-child { border-left: 0; } .ad-seg > span.on { background: #F0F0F0; }
.ad-seg .ms { font-size: 18px; }

/* Bottom nav (customer): transparent, pill on the selected item */
.ad-nav { position: absolute; z-index: 15; left: 0; right: 0; bottom: 0; height: 84px; padding: 8px 0 22px; display: flex; justify-content: space-around; }
.ad-nav.solid { background: #FAFAFA; }
.ad-nav div { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 400 11px Inter; color: #fff; width: 80px; }
.ad-nav.solid div, .ad-nav.ink div { color: #111; }
.ad-nav i { width: 48px; height: 28px; border-radius: 14px; display: grid; place-items: center; }
.ad-nav .ms { font-size: 22px; }
.ad-nav .on { font-weight: 600; color: #111 !important; } .ad-nav .on i { background: #EBEBEB; }
/* Owner nav: Material 3 NavigationBar */
.ad-onav { position: absolute; z-index: 15; left: 0; right: 0; bottom: 0; height: 96px; background: #fff; border-top: 1px solid rgba(17,17,17,.35); display: flex; justify-content: space-around; padding-top: 12px; }
.ad-onav div { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 12px Inter; color: #2B2B2B; width: 80px; }
.ad-onav i { width: 64px; height: 32px; border-radius: 16px; display: grid; place-items: center; }
.ad-onav .on { color: #111; } .ad-onav .on i { background: #F0F0F0; }

/* Feed post */
.ad-post { position: absolute; inset: 0; background: #000; color: #fff; }
.ad-post video, .ad-post > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ad-topscrim { position: absolute; left: 0; right: 0; top: 0; height: 190px; background: linear-gradient(rgba(0,0,0,.5), transparent); }
.ad-botscrim { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(transparent, rgba(0,0,0,.5) 35%, rgba(0,0,0,.92)); }
.ad-ftop { position: absolute; top: 48px; left: 16px; right: 16px; }
.ad-ftop .row { display: flex; gap: 8px; height: 40px; }
.ad-ftop .sq { width: 40px; height: 40px; border-radius: 12px; background: rgba(0,0,0,.18); display: grid; place-items: center; color: #fff; }
.ad-ftop .sq.on { background: #FF6B35; }
.ad-ftop .search { flex: 1; border-radius: 12px; background: rgba(0,0,0,.18); display: flex; align-items: center; gap: 8px; padding: 0 4px 0 12px; color: rgba(255,255,255,.7); font-size: 14px; }
.ad-ftop .search .ms { font-size: 18px; color: #fff; } .ad-ftop .search .tune { margin-left: auto; font-size: 20px; width: 36px; text-align: center; }
.ad-ftabs { display: flex; gap: 16px; margin-top: 8px; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ad-ftabs span { color: rgba(255,255,255,.6); font-weight: 500; } .ad-ftabs span.on { color: #fff; font-weight: 700; position: relative; }
.ad-ftabs span.on::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 18px; height: 2.5px; margin-left: -9px; background: #fff; border-radius: 2px; }
.ad-info { position: absolute; left: 14px; right: 70px; bottom: 124px; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.ad-author { display: flex; align-items: center; gap: 8px; font: 700 18px Inter; }
.ad-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 4px 9px; font: 700 13px Inter; text-shadow: none; }
.ad-badge .ms { font-size: 14px; }
.ad-cap { font: 500 18px/1.4 Inter; margin-top: 8px; }
.ad-tags { font: 700 15px Inter; color: #fff; margin-top: 6px; }
.ad-meta { font-size: 14px; color: rgba(255,255,255,.85); margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.ad-meta .ms { font-size: 15px; }
.ad-rail { position: absolute; right: 4px; bottom: 130px; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 20px; color: #fff; }
.ad-rail div { display: flex; flex-direction: column; align-items: center; font: 500 12px Inter; text-shadow: 0 1px 6px rgba(0,0,0,.54); }
.ad-rail .ms { font-size: 28px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.ad-promo { display: inline-flex; align-items: center; gap: 5px; background: #FFAB40; color: #000; border-radius: 999px; padding: 5px 10px; font: 700 12px Inter; margin-top: 6px; text-shadow: none; }
.ad-promo .ms { font-size: 14px; }
.ad-burst { position: absolute; left: 50%; top: 45%; font-size: 110px; transform: translate(-50%,-50%) scale(.6); opacity: 0; transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .7s; }
.ad-burst.in { transform: translate(-50%,-50%) scale(1.4); opacity: 1; }

/* Sheets content */
.ad-sheet h4 { margin: 0; font: 500 16px Inter; }
.ad-row { display: flex; align-items: center; gap: 10px; }
.ad-qty { display: inline-flex; align-items: center; gap: 6px; background: #EBEBEB; border-radius: 999px; padding: 3px 6px; font: 700 14px Inter; }
.ad-qty .ms { font-size: 20px; }
.ad-ofc { background: rgba(245,245,245,.45); border: 1px solid rgba(17,17,17,.25); border-radius: 18px; padding: 12px; }
.ad-health { background: rgba(228,228,228,.5); border-radius: 12px; padding: 12px 8px 4px 8px; display: flex; gap: 8px; font-size: 12px; }

/* Place page */
.ad-hero { position: relative; height: 320px; }
.ad-hero img { width: 100%; height: 100%; }
.ad-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.35), transparent 35%, transparent 60%, rgba(0,0,0,.6)); }
.ad-hero .tb { position: absolute; z-index: 2; top: 48px; left: 16px; right: 16px; display: flex; gap: 12px; color: #fff; }
.ad-hero .tb span { width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.4); display: grid; place-items: center; }
.ad-hero .dots { position: absolute; z-index: 2; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 6px 10px; display: flex; gap: 5px; }
.ad-hero .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.55); } .ad-hero .dots i.on { width: 16px; background: rgba(255,255,255,.95); }
.ad-phead { background: #fff; border-bottom: 1px solid #E0E0E0; padding: 16px 16px 16px 20px; display: flex; gap: 10px; }
.ad-phead .nm { font: 600 24px/1.2 Inter; }
.ad-dchip { white-space: nowrap; background: #F5F5F5; border-radius: 16px; padding: 4px 12px; font: 500 12px Inter; }
.ad-rtile { background: rgba(245,245,245,.6); border-radius: 12px; padding: 8px 12px; text-align: center; font: 500 11px Inter; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ad-tabs { display: flex; background: #fff; border-bottom: 1px solid #E0E0E0; }
.ad-tabs span { flex: 1; text-align: center; padding: 14px 0 12px; font: 400 14px Inter; color: #2B2B2B; position: relative; }
.ad-tabs span.on { font-weight: 600; color: #111; } .ad-tabs span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; background: #FF6B35; }
.ad-mtile { height: 116px; background: #fff; border: 1px solid #E0E0E0; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.05); display: flex; align-items: center; padding: 12px 8px 12px 12px; gap: 12px; margin-bottom: 8px; }
.ad-mtile > img { width: 92px; height: 92px; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.1); flex: none; }
.ad-mtile .ph { width: 92px; height: 92px; border-radius: 14px; flex: none; background: linear-gradient(135deg, rgba(235,235,235,.55), #F5F5F5); display: grid; place-items: center; color: #8A8A8A; }
.ad-mtile .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ad-mtile .nm { font: 600 15px Inter; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-price { background: rgba(235,235,235,.7); border-radius: 999px; padding: 3px 8px; font: 700 13.5px Inter; white-space: nowrap; }
.ad-mtile .ds { font-size: 13px; color: #8A8A8A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-plus { width: 34px; height: 34px; border-radius: 50%; background: #EBEBEB; display: grid; place-items: center; flex: none; }
.ad-plus .ms { font-size: 20px; }
.ad-mtile.out { opacity: .45; }
.ad-catrow { display: flex; gap: 10px; overflow: hidden; }
.ad-catrow span { border-radius: 999px; padding: 10px 14px; font: 700 14px Inter; background: #F5F5F5; border: 1px solid rgba(17,17,17,.08); white-space: nowrap; }
.ad-catrow span.on { background: #EBEBEB; border-color: rgba(17,17,17,.35); }
.ad-wait { background: rgba(245,245,245,.72); border: 1px solid rgba(17,17,17,.15); border-radius: 16px; padding: 10px 12px; transition: background .3s, border-color .3s; }
.ad-wait.called { background: #EBEBEB; border-color: #111; }
.ad-ticket { background: #fff; border-radius: 12px; padding: 8px 12px; font: 700 22px Inter; transition: .3s; }
.ad-wait.called .ad-ticket { background: #111; color: #fff; }

/* Map */
.ad-map { position: absolute; inset: 0; background: #EEF0F2; }
.ad-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ad-pin { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: #fff; border: 2.5px solid #E0A03E; color: #E0A03E; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.22); }
.ad-pin .ms { font-size: 17px; } .ad-pin.sel { background: #E0A03E; color: #fff; border-color: rgba(255,255,255,.95); }
.ad-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #E0A03E; box-shadow: 0 0 0 1.2px #fff; opacity: .8; }
.ad-crawlpin { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #E91E8C; border: 2.5px solid #fff; color: #fff; display: grid; place-items: center; font: 800 18px Inter; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.ad-crawlpin::after { content: ""; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: #2ECC71; border: 2px solid #fff; }
.ad-msearch { white-space: nowrap; overflow: hidden; position: absolute; top: 50px; left: 12px; right: 12px; height: 44px; background: #fff; border-radius: 16px; box-shadow: 0 3px 12px rgba(0,0,0,.12); display: flex; align-items: center; gap: 8px; padding: 0 6px 0 16px; color: #2B2B2B; font-size: 14px; }
.ad-msearch .b { margin-left: auto; display: flex; gap: 4px; } .ad-msearch .b span { background: #F5F5F5; border-radius: 999px; padding: 6px 10px; display: grid; place-items: center; }
.ad-mchips { position: absolute; top: 102px; left: 12px; right: 0; display: flex; gap: 6px; overflow: hidden; }
.ad-mchips span { background: #F5F5F5; border: 1.5px solid #E0E0E0; border-radius: 16px; padding: 6px 14px; font: 400 13px Inter; white-space: nowrap; height: 34px; display: flex; align-items: center; }
.ad-glass { background: rgba(255,255,255,.72) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.ad-count { background: #EBEBEB; border-radius: 16px; padding: 16px; }
.ad-count.red { background: #FFDAD6; color: #410002; }
.ad-count .big { font: 800 36px Inter; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.ad-bar { height: 6px; border-radius: 6px; background: rgba(17,17,17,.18); overflow: hidden; } .ad-bar i { display: block; height: 100%; background: currentColor; border-radius: 6px; transition: width 1s linear; }
.ad-av { width: 40px; height: 40px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font: 600 16px Inter; flex: none; }

/* Owner */
.ad-stat { flex: 1; background: rgba(245,245,245,.6); border-radius: 16px; padding: 14px; }
.ad-stat .v { font: 700 22px Inter; margin: 6px 0 2px; } .ad-stat .l { font: 500 11px Inter; color: #2B2B2B; }
.ad-oticket { background: rgba(245,245,245,.6); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; transition: background .3s; }
.ad-oticket .ic { width: 32px; height: 32px; border-radius: 9px; background: #E4E4E4; display: grid; place-items: center; } .ad-oticket .ic .ms { font-size: 16px; }
.ad-oticket .ln { display: flex; gap: 6px; font-size: 12px; margin-top: 4px; } .ad-oticket .ln b { width: 30px; }
.ad-note { background: rgba(228,228,228,.6); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: #222; display: flex; gap: 6px; margin-top: 8px; }
.ad-kpi { background: rgba(245,245,245,.5); border: 1px solid rgba(17,17,17,.12); border-radius: 22px; padding: 14px; height: 130px; display: flex; flex-direction: column; justify-content: space-between; }
.ad-kpi .ib { width: 38px; height: 38px; border-radius: 14px; background: linear-gradient(135deg, #EBEBEB, #E4E4E4); display: grid; place-items: center; }
.ad-kpi .ib .ms { font-size: 20px; }
.ad-trend { display: flex; align-items: flex-end; gap: 6px; height: 84px; }
.ad-trend i { flex: 1; border-radius: 99px; background: linear-gradient(90deg, #111, #8A8A8A); height: 8px; transition: height .45s cubic-bezier(.2,.9,.3,1); }
.ad-qtile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(245,245,245,.4); border: 1px solid rgba(17,17,17,.15); margin-bottom: 10px; transition: .3s; }
.ad-qtile .tk { width: 56px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; font: 700 16px Inter; transition: .3s; }
.ad-qtile.called { background: #EBEBEB; border-color: #111; } .ad-qtile.called .tk { background: #111; color: #fff; }
.ad-slider { height: 4px; background: rgba(255,107,53,.3); border-radius: 4px; position: relative; margin: 18px 6px; }
.ad-slider i { position: absolute; left: 0; top: 0; bottom: 0; background: #FF6B35; border-radius: 4px; transition: width .6s; }
.ad-slider b { position: absolute; top: -8px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #FF6B35; transition: left .6s; }
.ad-cam { position: absolute; inset: 0; background: #111; }
.ad-cam img { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(2px) brightness(.8); }
.ad-qrframe { position: absolute; left: 86px; top: 210px; width: 240px; height: 240px; border-radius: 22px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.ad-qrframe::before { content: ""; position: absolute; inset: 0; border: 3px solid #fff; border-radius: 22px; }
.ad-qrframe .scanline { position: absolute; left: 10px; right: 10px; height: 2px; background: #FF6B35; box-shadow: 0 0 12px #FF6B35; animation: adscan 1.6s ease-in-out infinite alternate; }
@keyframes adscan { from { top: 14px; } to { top: 222px; } }
.ad-qr { width: 200px; height: 200px; margin: 20px auto; background-image: repeating-linear-gradient(90deg, #111 0 8px, transparent 8px 13px, #111 13px 16px, transparent 16px 24px), repeating-linear-gradient(0deg, #fff 0 7px, transparent 7px 12px); background-blend-mode: normal; border-radius: 6px; position: relative; }

.ad-device:has(.ad-stage > .ad-screen:last-child:not(.scrolled) .ad-hero) .ad-status,
.ad-device:has(.ad-stage > .ad-screen:last-child .ad-post) .ad-status,
.ad-device:has(.ad-stage > .ad-screen:last-child .ad-cam) .ad-status,
.ad-device:has(.ad-stage > .ad-screen:last-child .ad-darkhead) .ad-status { color: #fff; }
.ad-device:has(.ad-stage > .ad-screen:last-child .ad-post) .ad-home { background: rgba(255,255,255,.75); }
.ad-phead > div:first-child { min-width: 0; }

/* ---------- "Today" screens (todaydemos.js): plain, generic apps ---------- */
.td-screen { position: absolute; inset: 0; background: #fff; color: #202124; font-family: Roboto, "Inter", system-ui, sans-serif; }
.td-sub { font-size: 13px; color: #5f6368; }
.td-bar { position: absolute; left: 0; right: 0; top: 0; height: 96px; padding: 48px 14px 0; display: flex; gap: 14px; align-items: flex-start; background: #fff; border-bottom: 1px solid #e8eaed; z-index: 2; }
.td-bar b { font-size: 17px; }
.td-search { position: absolute; z-index: 3; left: 14px; right: 14px; top: 50px; height: 48px; border-radius: 24px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 15px; color: #202124; }
.td-search.q .in { flex: 1; }
.td-search .in.typing::after, .td-input .in.typing::after { content: "|"; color: #1A73E8; }
.td-mapstrip { position: absolute; left: 0; right: 0; top: 0; height: 250px; background: #E8EAED repeating-linear-gradient(35deg, transparent 0 46px, #fff 46px 54px), #E8EAED; }
.td-mapstrip i { position: absolute; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #EA4335; }
.td-row { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #e8eaed; }
.td-row b { font-size: 15px; }
.td-row.usual b { color: #1A73E8; }
.td-thumb { width: 64px; height: 64px; border-radius: 8px; background: #e8eaed; flex: none; }
.td-photos { position: absolute; left: 0; right: 0; top: 0; height: 250px; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.td-photos img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.85); }
.td-photos img:first-child { grid-row: span 2; }
.td-actions { display: flex; gap: 8px; margin-top: 10px; }
.td-actions span { display: inline-flex; gap: 6px; align-items: center; border: 1px solid #dadce0; border-radius: 18px; padding: 7px 12px; font-size: 13px; color: #1A73E8; }
.td-actions .ms { font-size: 17px; }
.td-menuph { position: relative; height: 170px; border-radius: 10px; overflow: hidden; background: #d7d2c8; display: grid; place-items: center; }
.td-date { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 6px; }
.td-paper { width: 70%; background: #faf6ec; padding: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.td-paper b { display: block; text-align: center; letter-spacing: .2em; margin-bottom: 8px; font-size: 13px; }
.td-paper i { display: block; height: 5px; background: #8d8576; border-radius: 3px; margin: 7px 0; }
.td-cm { max-height: 300px; overflow: hidden; }
.td-crow { display: flex; gap: 10px; padding: 8px 0; font-size: 14px; }
.td-crow b { font-size: 12px; color: #5f6368; }
.td-av { width: 32px; height: 32px; border-radius: 50%; background: #dadce0; display: grid; place-items: center; font-weight: 700; flex: none; color: #5f6368; }
.td-res { padding: 12px 16px; border-bottom: 1px solid #f1f3f4; }
.td-link { display: block; color: #1a0dab; font-size: 17px; font-weight: 500; margin: 2px 0; }
.td-ad { font: 700 11px Roboto, sans-serif; color: #202124; display: block; margin-bottom: 2px; }
.td-chat { position: absolute; top: 96px; bottom: 76px; left: 0; right: 0; overflow: hidden; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; background: #ECE5DD; }
.td-b { align-self: flex-start; max-width: 78%; background: #fff; border-radius: 10px; padding: 7px 10px; font-size: 14px; line-height: 1.35; box-shadow: 0 1px 1px rgba(0,0,0,.1); opacity: 0; transform: translateY(8px); transition: .25s; }
.td-b.in { opacity: 1; transform: none; }
.td-b.me { align-self: flex-end; background: #DCF8C6; }
.td-b b { display: block; font-size: 12px; color: #6a1b9a; }
.td-b i { font-style: normal; font-size: 11px; color: #8696a0; margin-left: 8px; float: right; margin-top: 4px; }
.td-input { position: absolute; left: 0; right: 0; bottom: 0; height: 76px; padding: 10px 12px 26px; display: flex; gap: 10px; align-items: center; background: #F0F0F0; }
.td-input .in { flex: 1; background: #fff; border-radius: 20px; padding: 9px 14px; min-height: 38px; font-size: 14px; }
.td-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.td-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.td-url { position: absolute; left: 12px; right: 12px; top: 54px; height: 40px; border-radius: 20px; background: #f1f3f4; display: flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 13px; color: #5f6368; white-space: nowrap; overflow: hidden; }
.td-url .ms { font-size: 15px; }
.td-p { font-size: 14px; line-height: 1.6; color: #3c4043; }
.td-adbox { height: 110px; background: repeating-linear-gradient(45deg, #f1f3f4 0 12px, #e8eaed 12px 24px); display: grid; place-items: center; color: #9aa0a6; font-size: 12px; margin: 12px 0; }
.td-chart { display: flex; align-items: flex-end; gap: 4px; height: 80px; margin-top: 8px; }
.td-chart i { flex: 1; background: #A8C7FA; border-radius: 3px 3px 0 0; }
.td-card { color: #fff; border-radius: 16px; padding: 14px; margin-bottom: 10px; }
.td-card span { font-size: 12px; opacity: .85; }
.td-stamps { display: flex; gap: 6px; margin: 10px 0 6px; }
.td-stamps i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); }
.td-stamps i.on { background: #fff; }
.td-field { border-bottom: 1px solid #dadce0; padding: 10px 0 8px; margin-top: 6px; min-height: 52px; }
.td-field label { display: block; font-size: 12px; color: #5f6368; }
.td-btn { margin-top: 20px; background: #dadce0; color: #5f6368; text-align: center; border-radius: 8px; padding: 14px; font-weight: 700; }
.td-spin { width: 40px; height: 40px; border-radius: 50%; border: 4px solid rgba(255,255,255,.3); border-top-color: #fff; animation: tdspin 1s linear infinite; }
@keyframes tdspin { to { transform: rotate(360deg); } }
.ad-device:has(.ad-stage > .ad-screen:last-child .td-photos) .ad-status { color: #fff; }
.ad-device:has(.ad-stage > .ad-screen:last-child .td-photos) .ad-status ~ x,
.ad-device:has(.ad-stage > .ad-screen:last-child .td-mapstrip) .ad-status { color: #111; }
/* A "today" phone is plain grey, a Munchl phone glows. */
.appdemo.today { background: linear-gradient(160deg, #3a3a3e, #1c1c1f); box-shadow: 0 0 0 1px #3a3a3e, 0 30px 60px -20px #000; }

/* Safari can paint a playing <video> above its positioned siblings inside a
   transformed parent; keep the post's text and buttons on their own layer. */
.ad-post video { z-index: 0; transform: translateZ(0); }
.ad-post .ad-topscrim, .ad-post .ad-botscrim { z-index: 1; transform: translateZ(0); }
.ad-post .ad-info, .ad-post .ad-rail, .ad-post .ad-ftop { z-index: 2; transform: translateZ(0); }
.ad-post .ad-burst { z-index: 3; }
.td-home { position: absolute; inset: 0; background: linear-gradient(160deg, #3B4371, #F3904F); display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 26px 8px; padding: 90px 18px 0; }
.td-app { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 500 12px Roboto, sans-serif; color: #fff; transition: transform .5s cubic-bezier(.5,0,.8,.4), opacity .5s; }
.td-app span { width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.td-app span .ms { font-size: 32px; }
.td-app.go { transform: translate(var(--tx, 0), 260px) scale(.1); opacity: 0; }
.td-app:nth-child(4n+1).go { --tx: 140px; } .td-app:nth-child(4n+2).go { --tx: 50px; } .td-app:nth-child(4n+3).go { --tx: -50px; } .td-app:nth-child(4n).go { --tx: -140px; }
.td-munchl { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1); text-align: center; color: #fff; font: 800 20px Inter, sans-serif; }
.td-munchl img { width: 130px; height: 130px; display: block; margin: 0 auto 10px; filter: drop-shadow(0 10px 30px rgba(255,107,53,.7)); }
.td-munchl.in { transform: translate(-50%, -50%) scale(1); }

/* Interactive phones (/play/): the visitor taps. */
.appdemo.live .ad-sheets .ad-sheet-wrap { pointer-events: auto; }
.appdemo.live .ad-finger { display: none; }
.appdemo.live .ad-device { cursor: default; user-select: none; -webkit-user-select: none; touch-action: none; }
.ad-hint { position: relative; cursor: pointer; animation: adhint 1.4s ease-in-out infinite; border-radius: 12px; }
@keyframes adhint { 0%, 100% { box-shadow: 0 0 0 0 rgba(10,132,255,.0), 0 0 0 3px rgba(10,132,255,.9); } 50% { box-shadow: 0 0 0 10px rgba(10,132,255,.18), 0 0 0 3px rgba(10,132,255,.9); } }
.ad-swipe { position: absolute; z-index: 60; left: 50%; bottom: 120px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 16px; background: rgba(17,17,17,.78); color: #fff; font: 600 15px Inter, sans-serif; pointer-events: none; }
.ad-swipe span { width: 14px; height: 14px; border-radius: 50%; background: #fff; animation: adswipe 1.2s ease-in-out infinite; }
.ad-swipe.up span { animation-direction: reverse; }
@keyframes adswipe { 0% { transform: translateY(18px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }