/*
 * Devices + iOS 26 "Liquid Glass" components for app mock-ups.
 * Use with insight.css (.phone/.scr/.view/.sbar/.touch) and app-skins.css.
 *
 *   <div class="tablet"><div class="scr lgx">…</div></div>     iPad-style bezel, landscape
 *   .lg            glass material (light).  .lg.dk = dark glass
 *   .lg-tabbar     floating capsule tab bar  > .lg-tab(.on) > iconify-icon + <em>label</em>
 *   .lg-search     separate round glass button beside the tab bar
 *   .lg-btn        round glass icon button (back, more, share)
 *   .lg-pill       capsule glass button / chip
 *   .lg-seg        segmented control  > span(.on)
 *   .lg-title      iOS large title     .lg-sub small caption
 *   .lgx           neutral iOS screen base (light); add .dark for dark UI
 */

/* ---------- tablet ---------- */
.tablet { position: relative; width: 560px; max-width: 100%; aspect-ratio: 4 / 3; background: #0c0d0f; border-radius: 34px; padding: 13px;
  box-shadow: 0 60px 90px -45px rgba(0,0,0,.9), 0 0 0 1.5px #2a2d33, inset 0 0 0 1.5px #1b1d21, 0 0 70px -10px rgba(59,130,246,.22); }
.tablet::before { content: ""; position: absolute; top: 50%; left: 5px; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #1e2127; z-index: 30; }
.tablet > .scr { border-radius: 22px; }
.tablet .sbar { height: 30px; padding: 4px 22px 0; font-size: 11px; }
.tablet .view { padding: 34px 18px 16px; }

/* ---------- screen base ---------- */
.scr.lgx { background: #f2f3f7; color: #0b0b0f; font-family: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif; }
.scr.lgx .view { background: transparent; }
.scr.lgx.dark { background: #0b0c10; color: #f5f5f7; }
.scr.lgx.dark .sbar { color: #f5f5f7; }
.lg-title { font-size: 27px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.lg-sub { font-size: 11.5px; color: rgba(60,60,67,.62); font-weight: 500; }
.dark .lg-sub { color: rgba(235,235,245,.6); }
.lg-sec { font-size: 13px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; justify-content: space-between; }
.lg-sec a, .lg-sec span { font-size: 11px; font-weight: 600; color: #0a84ff; }

/* ---------- glass material ---------- */
.lg { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.3), 0 10px 30px -14px rgba(20,20,40,.35); }
.lg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 70%, rgba(255,255,255,.25) 100%); mix-blend-mode: soft-light; }
.lg.dk { background: linear-gradient(180deg, rgba(58,58,64,.62), rgba(28,28,32,.5)); border-color: rgba(255,255,255,.16); color: #f5f5f7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 30px -14px rgba(0,0,0,.7); }

/* ---------- floating tab bar + search ---------- */
.lg-tabbar { position: absolute; left: 12px; right: 66px; bottom: 16px; z-index: 12; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 99px; }
.lg-tabbar.full { right: 12px; }
.lg-tab { flex: 1; display: grid; justify-items: center; gap: 1px; padding: 6px 0 5px; border-radius: 99px; color: rgba(60,60,67,.75); font-size: 17px; transition: background .3s, color .3s; }
.lg-tab em { font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: 0; }
.lg-tab.on { background: rgba(255,255,255,.85); color: var(--lg-tint, #0a84ff); box-shadow: 0 2px 8px -3px rgba(0,0,0,.18); }
.lg.dk .lg-tab { color: rgba(235,235,245,.7); } .lg.dk .lg-tab.on { background: rgba(255,255,255,.16); color: var(--lg-tint, #ffffff); box-shadow: none; }
.lg-search { position: absolute; right: 12px; bottom: 16px; z-index: 12; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; color: rgba(60,60,67,.85); }
.lg.dk.lg-search { color: #f5f5f7; }
.tablet .lg-tabbar { left: 50%; right: auto; transform: translateX(-50%); bottom: 14px; min-width: 300px; }
.tablet .lg-search { bottom: 14px; }

/* ---------- controls ---------- */
.lg-btn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; flex: none; color: inherit; }
.lg-pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.lg-pill.tint { background: var(--lg-tint, #0a84ff); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -8px var(--lg-tint, #0a84ff); }
.lg-pill.tint::after { display: none; }
.lg-seg { display: inline-flex; padding: 3px; border-radius: 99px; gap: 2px; }
.lg-seg span { font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 99px; color: rgba(60,60,67,.75); }
.lg-seg span.on { background: #fff; color: #0b0b0f; box-shadow: 0 2px 8px -2px rgba(0,0,0,.2); }
.lg.dk.lg-seg span { color: rgba(235,235,245,.7); } .lg.dk.lg-seg span.on { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
.lg-toolbar { display: flex; align-items: center; gap: 8px; }
.lg-card { border-radius: 22px; padding: 12px; }
.lg-num { font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.lg-num small { font-size: .42em; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.lg-up { color: #30d158; font-weight: 700; } .lg-down { color: #ff453a; font-weight: 700; }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #30d158; box-shadow: 0 0 0 3px rgba(48,209,88,.2); }
.lg-list { border-radius: 18px; overflow: hidden; background: #fff; }
.dark .lg-list { background: #1c1c1f; }
.lg-li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 12.5px; }
.lg-li + .lg-li { border-top: 1px solid rgba(60,60,67,.12); }
.dark .lg-li + .lg-li { border-top-color: rgba(235,235,245,.08); }
.lg-li .grow { flex: 1; min-width: 0; } .lg-li b { font-weight: 600; } .lg-li span { font-size: 10.5px; color: rgba(60,60,67,.6); }
.dark .lg-li span { color: rgba(235,235,245,.55); }
.lg-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; color: #fff; flex: none; background: var(--c, #0a84ff); }
@media (max-width: 640px) { .tablet { border-radius: 24px; padding: 8px; } .tablet > .scr { border-radius: 16px; } }

/* ---------- browser window (web apps) ----------
   <div class="browser"><div class="bar"><i></i><i></i><i></i><span class="url">app.example.com</span></div><div class="bscr"> … </div></div>
   .bscr is a positioned box; give it an aspect-ratio (default 16/10) or put an <img>/<video> inside. */
.browser { position: relative; width: 100%; max-width: 1120px; border-radius: 16px; background: #0f1014; box-shadow: 0 60px 100px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1), 0 0 90px -20px color-mix(in srgb, var(--cs-tint, #3b82f6) 30%, transparent); overflow: hidden; }
.browser > .bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: linear-gradient(180deg, #1c1d22, #16171b); border-bottom: 1px solid rgba(255,255,255,.07); }
.browser > .bar > i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; flex: none; }
.browser > .bar > i:nth-child(2) { background: #febc2e; } .browser > .bar > i:nth-child(3) { background: #28c840; }
.browser > .bar .url { margin: 0 auto; font-family: -apple-system, "Inter", system-ui, sans-serif; font-size: 12px; color: rgba(235,235,245,.6); background: rgba(255,255,255,.06); padding: 4px 14px; border-radius: 8px; min-width: 40%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateX(-20px); }
.browser.light > .bar { background: linear-gradient(180deg, #f6f6f7, #ececee); border-bottom-color: rgba(0,0,0,.08); }
.browser.light > .bar .url { color: rgba(60,60,67,.7); background: rgba(0,0,0,.05); }
.browser > .bscr { position: relative; aspect-ratio: 16 / 10; overflow: hidden; font-family: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif; }
.browser > .bscr.auto { aspect-ratio: auto; }
.browser > .bscr > img, .browser > .bscr > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (max-width: 640px) { .browser { border-radius: 11px; } .browser > .bar { height: 28px; gap: 5px; padding: 0 10px; } .browser > .bar > i { width: 8px; height: 8px; } .browser > .bar .url { font-size: 10px; padding: 2px 10px; } }