/* Mockup page chrome (gallery / screens). Not part of the product UI. */
/* gallery / spec pages: calm solid page, each tile carries its own wallpaper so glass has colour behind it */
html:has(.page) { background: var(--bg-sunken); }
body:has(> .page)::before { display: none; }
.page { max-width: 1440px; margin: 0 auto; padding: 56px 64px 96px; }
.page__head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 40px; }
.page__title { font-size: 28px; font-weight: 680; letter-spacing: -0.02em; margin: 0; }
.page__sub { color: var(--text-2); margin-top: 6px; font-size: 14.5px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.tile { border-radius: 28px; padding: 22px 26px 30px; background: var(--ambient); background-color: var(--bg); background-size: 150% 150%; background-position: 0 0;
        box-shadow: inset 0 0 0 .5px var(--line), 0 1px 2px rgba(30,40,80,.04); }
.tile:nth-child(4n+2) { background-position: 100% 0; }
.tile:nth-child(4n+3) { background-position: 0 100%; }
.tile:nth-child(4n+4) { background-position: 100% 100%; }
.tile--wide { grid-column: 1 / -1; }
.tile__cap { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.tile__no { font-size: 12px; font-weight: 700; color: var(--text-2); letter-spacing: .04em; }
.tile__name { font-size: 15px; font-weight: 650; }
.tile__desc { font-size: 12.5px; color: var(--text-2); margin-left: auto; text-align: right; }
.stage { display: grid; gap: 14px; justify-items: start; }
.stage > * { width: 100%; }
.stage > .receipt, .stage > .notify { width: auto; }
/* desktop-wallpaper sample (macOS-like) behind the notification */
.wallpaper { position: relative; border-radius: 20px; overflow: hidden; padding: 28px; min-height: 230px; display: grid; place-items: center;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08);
  background:
    radial-gradient(70% 90% at 10% 10%, #7FA8FF 0%, rgba(127,168,255,0) 62%),
    radial-gradient(55% 80% at 92% 18%, #C9A6FF 0%, rgba(201,166,255,0) 62%),
    radial-gradient(70% 80% at 80% 105%, #FFB48C 0%, rgba(255,180,140,0) 62%),
    radial-gradient(60% 70% at 18% 100%, #7FDCCB 0%, rgba(127,220,203,0) 62%), #E9ECF6; }
[data-theme="dark"] .wallpaper { box-shadow: inset 0 0 0 .5px rgba(255,255,255,.06); background:
    radial-gradient(70% 90% at 10% 10%, #2A55D6 0%, rgba(42,85,214,0) 62%),
    radial-gradient(55% 80% at 92% 18%, #6A36B8 0%, rgba(106,54,184,0) 62%),
    radial-gradient(70% 80% at 80% 105%, #A8482A 0%, rgba(168,72,42,0) 62%),
    radial-gradient(60% 70% at 18% 100%, #0F7C6E 0%, rgba(15,124,110,0) 62%), #0B0D16; }
.wallpaper__fake { position: absolute; inset: auto 28px 22px 28px; display: grid; gap: 8px; opacity: .6; }
.wallpaper__fake i { display: block; height: 10px; border-radius: 6px; background: rgba(255,255,255,.75); }
[data-theme="dark"] .wallpaper__fake i { background: rgba(255,255,255,.16); }
.theme-btn { margin-left: auto; }
.note { font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.note code { font-family: var(--font-mono); font-size: 11.5px; background: var(--ctl-fill); box-shadow: inset 0 0 0 .5px var(--line); padding: 1px 6px; border-radius: 6px; color: var(--text-2); }

/* ---------- desktop app shell ---------- */
.app { display: grid; grid-template-columns: 88px 1fr; height: 100vh; overflow: hidden; }
/* sidebar = thick glass, floating inset (macOS Tahoe) */
.rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0 14px; margin: 10px 0 10px 10px; border-radius: 26px; min-height: 0;
        background-color: var(--mat-thick); background-image: var(--sheen); position: relative;
        -webkit-backdrop-filter: var(--mat-blur-thick); backdrop-filter: var(--mat-blur-thick); box-shadow: var(--shadow-raise), var(--inner-hi); }
.rail::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.rail__mark { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 16px; overflow: hidden; box-shadow: 0 4px 12px -4px rgba(0,60,180,.45); }
.rail__item { width: 58px; padding: 8px 0 6px; border-radius: 16px; display: grid; justify-items: center; gap: 4px; color: var(--text-3); font-size: 11px; font-weight: 560; cursor: pointer;
              transition: background-color var(--t-fast), color var(--t-fast); }
.rail__item:hover { background: var(--surface-3); color: var(--text-2); }
.rail__item .ic { width: 19px; height: 19px; }
.rail__item.on { background: var(--sel-fill); color: var(--text); box-shadow: 0 0 0 .5px var(--line), var(--inner-hi), 0 4px 12px -6px rgba(30,40,80,.20); }
.rail__item.on .ic { color: var(--accent); }
.rail__foot { margin-top: auto; display: grid; gap: 10px; justify-items: center; color: var(--text-3); }
.main { position: relative; display: grid; grid-template-rows: 56px 1fr; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 0 18px 0 28px; grid-row: 1; grid-column: 1; position: relative; z-index: 6; }
.topbar__title { font-size: 15px; font-weight: 640; letter-spacing: -0.01em; }
.topbar .composer__btn { color: var(--text-2); background: var(--ctl-fill); box-shadow: 0 0 0 .5px var(--line-strong), var(--inner-hi), var(--shadow-btn);
                         -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.topbar .composer__btn:hover { background: var(--ctl-fill-hover); }
.topbar .pill { background-color: color-mix(in srgb, currentColor 12%, var(--ctl-fill)); }
.thread-wrap { overflow: hidden; position: relative; grid-row: 1 / -1; grid-column: 1; }
.thread { position: absolute; left: 0; right: 0; bottom: 172px; display: grid; justify-content: center; }
.thread__col { width: 720px; display: grid; gap: 22px; }
/* scroll-edge effect: content melts into a soft blur under the toolbar (no hard line) */
.thread-fade, .scroll-edge { position: absolute; left: 0; right: 0; top: 0; height: 96px; z-index: 5; pointer-events: none;
  background: linear-gradient(var(--edge-tint), transparent);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.dock { position: absolute; left: 0; right: 0; bottom: 24px; display: grid; justify-content: center; z-index: 3; }
.dock__col { width: 720px; }
.dock__hint { text-align: center; font-size: 11.5px; color: var(--text-2); margin-top: 8px; }
.float-tr { position: absolute; top: 68px; right: 24px; z-index: 5; }
.liveview { position: absolute; right: 24px; bottom: 24px; width: 380px; z-index: 4; border-radius: 24px; overflow: hidden;
            box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 6px var(--accent-soft), var(--shadow-float); }
.liveview__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px; font-size: 13.5px; font-weight: 620; }
.liveview__now { padding: 0 14px 10px; font-size: 12.5px; color: var(--accent-text); display: flex; align-items: center; gap: 6px; }
.liveview__screen { margin: 0 10px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line) inset; height: 196px; position: relative; color: #1b1b1b; }
.liveview__foot { display: flex; gap: 8px; padding: 10px; }
.liveview__foot .btn { flex: 1; }
.fakeweb__bar { height: 28px; background: #F1F3F5; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 10px; color: #6b7076; }
.fakeweb__bar i { width: 7px; height: 7px; border-radius: 50%; background: #d4d7db; display: inline-block; }
.fakeweb__url { margin-left: 8px; height: 18px; flex: 1; border-radius: 6px; background: #fff; display: flex; align-items: center; padding: 0 8px; }
.fakeweb__hero { height: 34px; background: #EA6A2A; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; padding: 0 12px; letter-spacing: .02em; }
.fakeweb__table { padding: 8px 12px; font-size: 9.5px; display: grid; gap: 0; }
.fakeweb__table div { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; padding: 5px 0; border-bottom: 1px solid #eef0f2; }
.fakeweb__table div:first-child { font-weight: 700; color: #6b7076; }
.fakeweb__table .hl { background: rgba(47,107,255,.12); box-shadow: inset 2px 0 0 #2F6BFF; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.cursor-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #FF4D4F; box-shadow: 0 0 0 3px rgba(255,77,79,.25); }

/* ---------- phone frame ---------- */
.stage-phone { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 48px; padding: 40px; }
.phone { width: 390px; height: 844px; border-radius: 56px; padding: 0; position: relative; overflow: hidden;
         background: var(--wallpaper-phone); background-color: var(--bg);
         box-shadow: 0 0 0 10px #111214, 0 0 0 11px #2A2B2F, 0 40px 80px -30px rgba(0,0,0,.45); }
[data-theme="dark"] .phone { box-shadow: 0 0 0 10px #1B1C1F, 0 0 0 11px #34353A, 0 40px 80px -30px rgba(0,0,0,.8); }
.phone__status { height: 50px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 30px 6px 36px; font-size: 15px; font-weight: 640; position: relative; z-index: 3; }
.phone__island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 120px; height: 34px; border-radius: 20px; background: #000; z-index: 4; }
.phone__sys { display: flex; gap: 6px; align-items: center; }
.phone__sys svg { height: 12px; }
.phone__home { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: var(--text); opacity: .85; z-index: 6; }
.phone__header { display: flex; align-items: center; gap: 10px; padding: 8px 18px 10px; }
.phone__header .mk { width: 34px; height: 34px; border-radius: 11px; }
.phone__name { font-size: 16px; font-weight: 650; line-height: 1.2; }
.phone__sub { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.phone__body { position: absolute; top: 108px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.phone__thread { position: absolute; left: 14px; right: 14px; bottom: 108px; display: grid; gap: 14px; }
.phone__dock { position: absolute; left: 12px; right: 12px; bottom: 28px; display: flex; gap: 8px; align-items: center; z-index: 5; }
.phone__input { flex: 1; height: 48px; border-radius: 24px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; color: var(--text-3); font-size: 15px; position: relative;
                background-color: var(--mat-thick); background-image: var(--sheen); -webkit-backdrop-filter: var(--mat-blur-thick); backdrop-filter: var(--mat-blur-thick);
                box-shadow: var(--shadow-raise), var(--inner-hi); }
.phone__mic { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--accent-grad); color: #fff; display: grid; place-items: center;
              box-shadow: inset 0 1px 0 rgba(255,255,255,.32), var(--accent-glow), 0 10px 24px -10px rgba(0,60,180,.5); }
.phone__mic .ic { width: 20px; height: 20px; }
.phone__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 4; pointer-events: none;
  background: linear-gradient(transparent, var(--edge-tint));
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  -webkit-mask-image: linear-gradient(transparent, #000 55%); mask-image: linear-gradient(transparent, #000 55%); }
.phone__top { position: absolute; top: 0; left: 0; right: 0; height: 150px; z-index: 2; pointer-events: none;
  background: linear-gradient(var(--edge-tint), transparent);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.phone .card { --r-card: 18px; }
.phone .msg-ai { grid-template-columns: minmax(0, 1fr); }
.phone .msg-ai__mark { display: none; }
.phone .confirm__row { grid-template-columns: 48px 1fr; }
.phone .bubble { max-width: 86%; }
/* iOS 26 floating glass tab bar */
.tabbar { position: absolute; left: 18px; right: 18px; bottom: 26px; height: 62px; padding: 5px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; z-index: 5; border-radius: 31px;
          background-color: var(--mat-thick); background-image: var(--sheen); -webkit-backdrop-filter: var(--mat-blur-thick); backdrop-filter: var(--mat-blur-thick);
          box-shadow: var(--shadow-float), var(--inner-hi); }
.tabbar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.tabbar a { display: grid; justify-items: center; align-content: center; gap: 2px; font-size: 10.5px; color: var(--text-2); font-weight: 600; border-radius: 26px; }
.tabbar a .ic { width: 22px; height: 22px; }
.tabbar a.on { color: var(--accent-text); background: var(--sel-fill); box-shadow: 0 0 0 .5px var(--line), var(--inner-hi); }
.phone-page { position: absolute; top: 50px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 6px 16px 0; }
.phone-page__title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 2px 4px; }
.phone-page__sub { font-size: 13px; color: var(--text-2); margin: 0 2px 14px; }
.dev-list { display: grid; gap: 10px; }
.dev-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 20px; }
.dev-row .device__ic { width: 40px; height: 40px; border-radius: 12px; }
.dev-row.is-on .device__ic { background: var(--accent-soft); color: var(--accent-text); }
.dev-row.is-offline { opacity: .72; }
.dev-row__sub { font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.dev-group { font-size: 12px; font-weight: 650; color: var(--text-2); letter-spacing: .04em; margin: 14px 4px 8px; }
.main.has-side .thread, .main.has-side .dock { justify-content: start; padding-left: clamp(24px, calc((100% - 404px - 720px) / 2), 160px); }