/* TopLeft on every screen: one set of pieces, laid out natively per platform (see js/app/tour.js). */
.app-tour { color: #1d1d1f; font-family: var(--sf); }
.t-desk { background:
  radial-gradient(ellipse 70% 60% at 18% 22%, #cfe9d4 0%, rgba(207, 233, 212, 0) 70%),
  radial-gradient(ellipse 60% 70% at 88% 82%, #f1e3b4 0%, rgba(241, 227, 180, 0) 70%),
  linear-gradient(150deg, #bfdcc6, #e2e8d2 52%, #ecdcb6); }
.t-menu { display: flex; align-items: center; gap: 17px; padding: 0 14px; font-size: 12.5px; font-weight: 500; white-space: nowrap; background: rgba(250, 250, 248, 0.55); box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.1); }
.t-menu b { font-weight: 700; }
.t-menu em { margin-left: auto; font-style: normal; }
.t-menu span { display: inline-flex; }
.t-win { box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24), 0 0 0 0.6px rgba(0, 0, 0, 0.3); }
.t-vwin { background: linear-gradient(165deg, rgba(150, 162, 157, 0.66), rgba(104, 115, 111, 0.7) 60%, rgba(92, 102, 99, 0.72)); box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.42), 0 34px 80px rgba(0, 0, 0, 0.16); }
.t-tile.v-look { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 6px rgba(255, 255, 255, 0.18); }
.t-side { overflow: hidden; }
.t-tabbar { background: rgba(255, 255, 255, 0.62); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.t-sb { display: flex; align-items: center; gap: 8px; padding: 0 22px; font-size: 15px; font-weight: 600; }
.t-sb .t-date { font-weight: 500; opacity: var(--date, 0); }
.t-sb .sb-ic { margin-left: auto; }
.t-time { font-size: 15px; font-weight: 600; color: #fff; }
.t-lights { display: flex; gap: 8px; }
.t-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.t-lights i:nth-child(2) { background: #febc2e; }
.t-lights i:nth-child(3) { background: #28c840; }
.t-stitle { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.t-search { display: flex; align-items: center; gap: 7px; padding-left: 9px; font-size: 13px; color: #8a8a8f; background: rgba(0, 0, 0, 0.06); white-space: nowrap; overflow: hidden; }
.t-map { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; overflow: hidden; }
.t-mq { display: grid; place-items: center; font-size: 10.5px; font-weight: 600; color: rgba(29, 29, 31, 0.8); white-space: nowrap; }
.t-mq-tl { background: #a8e3af; font-weight: 800; font-size: 12px; box-shadow: inset 0 0 0 2px #1d1d1f; }
.t-mq-tr, .t-mq-bl { background: #fde58f; }
.t-mq-br { background: #f8a3a3; }
.t-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #8a8a8f; white-space: nowrap; }
.t-hz { --lc: 0; --cnt: 1; --fs: 13; --fo: 0; white-space: nowrap; }
.t-hzl { position: absolute; top: 50%; left: calc((1 - var(--lc)) * (8px + var(--fo) * 26px) + var(--lc) * 50%); transform: translate(calc(var(--lc) * -50%), -50%); font-size: calc(var(--fs) * 1px); letter-spacing: -0.01em; }
.t-hzc { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: calc(var(--fs) * 0.9px); font-weight: 700; color: currentColor; opacity: calc(var(--cnt) * 0.55); }
.t-fold { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); line-height: 0; color: #0a84ff; opacity: var(--fo); }
.t-cal { padding: 8px 10px; background: rgba(255, 255, 255, 0.62); overflow: hidden; }
.t-cal p { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.t-cal p span { display: flex; gap: 6px; color: #0a84ff; line-height: 0; }
.t-calg { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 15px; margin-top: 6px; font-size: 9.5px; }
.t-calg i { font-style: normal; display: grid; place-items: center; }
.t-calg i.wd { color: #9a9aa0; font-size: 8px; }
.t-calg i.out { color: #b0b0b5; }
.t-calg i.on { border-radius: 50%; box-shadow: inset 0 0 0 1px #34c759; background: rgba(52, 199, 89, 0.12); font-weight: 700; }
.t-title { --tc: 0; font-size: 31px; line-height: 36px; font-weight: 700; letter-spacing: -0.012em; white-space: nowrap; }
.t-title span { position: absolute; top: 0; left: calc(var(--tc) * 50%); transform: translateX(calc(var(--tc) * -50%)); }
.t-pro { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: #f5f5f6; box-shadow: inset 0 0 0 0.6px rgba(0, 0, 0, 0.14); }
.t-tb { display: grid; place-items: center; color: #3a3a3f; }
.t-orn { background: linear-gradient(160deg, rgba(120, 130, 128, 0.7), rgba(70, 78, 76, 0.72)); box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, 0.3), 0 16px 40px rgba(0, 0, 0, 0.2); }
.t-tile { --exp: 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.t-exp { position: absolute; right: 12px; top: 12px; line-height: 0; color: #0a84ff; opacity: var(--exp); }
.t-tt { font-size: 15px; font-weight: 650; white-space: nowrap; }
.t-ts { font-size: 13px; color: rgba(29, 29, 31, 0.6); white-space: nowrap; }
.t-tc { font-size: 15px; font-weight: 700; white-space: nowrap; }
.t-nt { display: flex; align-items: center; padding-left: 10px; font-size: 13px; color: rgba(60, 60, 67, 0.45); background: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; }
.t-row { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 20px; white-space: nowrap; overflow: hidden; }
.t-row span { overflow: hidden; text-overflow: ellipsis; }
.t-dia { flex: none; width: 10px; height: 10px; margin: 0 1px 0 2px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, #8fd3ff, #1a8cf6 55%, #0a63c6); }
.t-pbar { background: #f9f8fd; box-shadow: 0 10px 26px rgba(30, 40, 60, 0.08), inset 0 0 0 0.6px rgba(0, 0, 0, 0.07); }
.t-chip { display: grid; place-items: center; font-size: 15px; white-space: nowrap; z-index: 3; }
.t-cap { z-index: 2; }
.t-focus { width: 236px; color: #fff; }
.tf-h { font-size: 22px; font-weight: 700; margin: 4px 0 14px 4px; }
.tf-r { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px; margin-bottom: 8px; border-radius: 16px; font-size: 15px; background: rgba(148, 227, 153, 0.34); }
.tf-r .sf { flex: none; }
.tf-add { padding: 10px 12px; font-size: 14px; color: rgba(255, 255, 255, 0.7); }
/* TV focus: the tile in focus lifts toward you */
.t-tile.tv-focus { box-shadow: 0 26px 50px rgba(0, 0, 0, 0.28), inset 0 0 0 3px rgba(255, 255, 255, 0.95); }