/* ═══════════════════════════════════════════════════════════════════════
   «ЭКРАН» — витрина как экран Mac. Чистота референса: белый стол, крупный
   мягкий снимок, мелкие квадратные миниатюры с серой подписью капсом,
   тонкий док без подписей, светлые окна с мелким заголовком. Никаких
   «таблеток», больших цветных плашек и подписей под значками — это язык
   телефонов, а не Mac.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#a1a1a6;
  --line:rgb(0 0 0 / .08);
  --fill:#f0f0f2;
  --stripe:#f4f5f7;
  --sel:#0a64d8;
  --link:#0a64d8;
  /* Кнопка действия — цвет салона; без своего цвета — синий Mac. */
  --accent:#0a7aff;
  --accent-ink:#fff;
  --ease:cubic-bezier(.2,.8,.2,1);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --thumb:40px;
  --app:38px;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{margin:0;background:#fff;color:var(--ink);font:400 13px/1.4 var(--ui);letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
button{font:inherit;color:inherit;letter-spacing:inherit}
a{color:inherit}
img,video{display:block;max-width:100%}
[hidden]{display:none!important}

/* ═══ СТОЛ ═══════════════════════════════════════════════════════════ */
.desk{position:fixed;inset:0;overflow:hidden;background:#fff}
.wall{position:absolute;inset:0;pointer-events:none}
/* Снимок крупный, растворяется в белом по краям и чуть не в фокусе — как
   голова на обоях референса: фон, а не картинка поверх фона. */
.wall-photo{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:min(118vw,760px);height:min(82svh,820px);background:#f2f2f4 center/cover no-repeat;
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
.wall-photo img{width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(3px) saturate(.96);transform:scale(1.04);transition:opacity .7s var(--ease)}
.wall-photo img.here{opacity:1}
.wall-word{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);padding:0 16px;text-align:center;
  font:800 clamp(64px,22vw,220px)/.9 -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;
  letter-spacing:-.05em;color:rgb(0 0 0 / .05);overflow-wrap:anywhere}

/* ── Снимки на столе ──────────────────────────────────────────────────── */
.icons{position:absolute;inset:0}
.icon{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;width:74px;padding:3px 1px;border:0;border-radius:6px;
  background:none;cursor:pointer;transform:translate(-50%,-50%) scale(.7);opacity:0;
  transition:transform .55s var(--ease) var(--d,0s),opacity .45s var(--ease) var(--d,0s)}
body.icons-in .icon{transform:translate(-50%,-50%);opacity:1}
.thumb{display:block;width:var(--thumb);height:var(--thumb);background:#eee center/cover;box-shadow:0 1px 3px rgb(0 0 0 / .22);transition:transform .15s}
.icon:active .thumb{transform:scale(.94)}
/* Выбранный снимок — рамка, как выделение файла в Finder. */
.icon.is-on .thumb{box-shadow:0 0 0 3px rgb(0 0 0 / .18),0 1px 3px rgb(0 0 0 / .22)}
/* Раздел без снимка — маленькая папка Mac, чтобы не выпадать из ряда. */
.thumb--folder{position:relative;background:none;box-shadow:none}
.thumb--folder::before{content:"";position:absolute;left:6%;top:16%;width:40%;height:14%;border-radius:3px 5px 0 0;background:#4ea3ec}
.thumb--folder i{position:absolute;left:6%;right:6%;top:24%;bottom:12%;border-radius:4px;background:#4ea3ec}
.thumb--folder::after{content:"";position:absolute;left:6%;right:6%;top:34%;bottom:12%;border-radius:4px;background:linear-gradient(#9fd4fd,#63b1f3)}
/* Лист — «О нас» без снимка и «Обработка данных»; N — подпись Nexo. */
.thumb--doc{position:relative;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M9 11h22M9 17h22M9 23h22M9 29h14' stroke='%23c7c7cc' stroke-width='1.6'/></svg>") center/cover}
.thumb--nexo{display:grid;place-items:center;background:#111;color:#fff;font-weight:800;font-size:calc(var(--thumb) * .46);letter-spacing:-.04em}
.badge-n{position:absolute;top:-4px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#ff3b30;color:#fff;
  font-size:10.5px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 1.5px rgb(255 255 255 / .9)}
.info-ico--doc{background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M9 11h22M9 17h22M9 23h22M9 29h14' stroke='%23c7c7cc' stroke-width='1.6'/></svg>") center/cover}
.preview--wide{aspect-ratio:4/3}
.icon-name{max-width:100%;padding:1px 3px;border-radius:3px;font-size:8.5px;line-height:1.22;font-weight:500;text-align:center;
  letter-spacing:.04em;text-transform:uppercase;color:#8a8a8f;text-shadow:0 0 3px #fff,0 0 1px #fff;
  -webkit-hyphens:auto;hyphens:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.icon.is-on .icon-name{background:var(--sel);color:#fff;text-shadow:none}
.icon:focus-visible{outline:none}
.icon:focus-visible .thumb{box-shadow:0 0 0 3px rgb(10 100 216 / .5)}

/* ═══ СТРОКА МЕНЮ ═══════════════════════════════════════════════════ */
.menubar{position:fixed;z-index:40;left:0;right:0;top:0;height:calc(var(--safe-t) + 26px);padding:var(--safe-t) 12px 0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink);
  background:rgb(255 255 255 / .42);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6)}
/* Строка меню продолжается вверх тем же стеклом: в браузере Telegram на
   iPhone страница уходит под его панель, а закреплённое сверху встаёт ниже
   неё — щель закрываем (то же правило, что у шапки «Флагмана»). */
.menubar::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:240px;background:inherit;
  -webkit-backdrop-filter:inherit;backdrop-filter:inherit;pointer-events:none}
.menu-l{display:flex;align-items:center;gap:8px;min-width:0}
.menu-l > b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-mark{flex:none;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--ink);color:#fff;font-size:8.5px;font-weight:700;overflow:hidden}
.menu-mark img{width:100%;height:100%;object-fit:contain;background:#fff}
.menu-items{display:none;gap:2px}
.menu-items button{padding:2px 8px;border:0;border-radius:4px;background:none;cursor:pointer;font-size:12px}
.menu-items button:hover{background:rgb(0 0 0 / .08)}
.menu-r{flex:none;font-variant-numeric:tabular-nums}

/* ═══ УВЕДОМЛЕНИЕ — только о выбранном ═════════════════════════════ */
.note{position:fixed;z-index:45;top:calc(var(--safe-t) + 32px);right:8px;width:min(340px,calc(100vw - 16px));
  display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;padding:9px 12px;border:0;border-radius:14px;
  text-align:left;cursor:pointer;background:rgb(246 246 248 / .78);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:0 0 0 .5px rgb(0 0 0 / .1),0 10px 28px -10px rgb(0 0 0 / .28);
  transform:translateX(calc(100% + 24px));transition:transform .45s var(--ease)}
.note.is-on{transform:none}
.note--low{top:auto;bottom:calc(var(--safe-b) + 72px);left:50%;right:auto;transform:translate(-50%,calc(100% + 90px))}
.note--low.is-on{transform:translate(-50%,0)}
.note-ico{--app:32px;border-radius:8px}
.note-ico em{font-size:6.5px;padding:2px 0 1px}
.note-ico b{font-size:15px;line-height:1.25}
.note-t{min-width:0}
.note-t b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-t small{display:block;font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-when{align-self:start;font-size:10.5px;color:var(--ink-3)}

/* ═══ ДОК ═══════════════════════════════════════════════════════════ */
.dock{position:fixed;z-index:44;left:50%;bottom:calc(var(--safe-b) + 10px);transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;max-width:calc(100vw - 12px);padding:5px 7px 6px;border-radius:16px;
  background:rgb(250 250 252 / .55);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:inset 0 0 0 .5px rgb(255 255 255 / .8),0 0 0 .5px rgb(0 0 0 / .1),0 12px 30px -12px rgb(0 0 0 / .3)}
.dock-i{position:relative;display:block;padding:0;border:0;background:none;cursor:pointer;text-decoration:none;
  transition:transform .25s var(--ease)}
.dock-i:active{transform:scale(.9)}
@media (hover:hover){ .dock-i:hover{transform:translateY(-6px) scale(1.12)} }
.dock-dot{position:absolute;left:50%;bottom:-5px;width:3.5px;height:3.5px;margin-left:-1.75px;border-radius:50%;background:#1d1d1f;opacity:0;transition:opacity .2s}
.dock-i.is-open .dock-dot{opacity:.7}
.dock-sep{align-self:stretch;width:1px;margin:3px 2px;background:rgb(0 0 0 / .14)}
/* Подпрыгивание при первом заходе — как запускаемое приложение на Mac. */
.dock-i.is-bounce{animation:прыжок .5s cubic-bezier(.3,0,.5,1) 3 alternate}
@keyframes прыжок{to{transform:translateY(-14px)}}

/* Значки приложений — «сквиркл» Big Sur: скругление 22 %, свет сверху,
   тонкий край и лёгкая тень, а не плоский цветной квадрат. */
.ico{position:relative;display:block;width:var(--app);height:var(--app);flex:none}
.ico-app{border-radius:22.5%;overflow:hidden;display:grid;place-items:center;
  box-shadow:inset 0 .5px 0 rgb(255 255 255 / .55),inset 0 0 0 .5px rgb(0 0 0 / .1),0 1px 2px rgb(0 0 0 / .18),0 3px 6px -3px rgb(0 0 0 / .25)}
.ico-app::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgb(255 255 255 / .22),rgb(255 255 255 / 0) 45%)}
.ico-app svg{width:62%;height:62%}
.ico-finder svg,.ico-photos svg,.ico-notes svg{width:100%;height:100%}
.ico-finder{background:#8fd0fa}
.ico-photos{background:#fff}
.ico-notes{background:#fdfdf8}
.ico-messages{background:linear-gradient(#6bec7c,#1fbd3d)}
.ico-phone{background:linear-gradient(#6bec7c,#1fbd3d)}
.ico-stars{background:#fff}
.ico-contacts{background:linear-gradient(#b99b82,#8a6d55)}
.ico-wallet{background:#1c1c1e}
.ico-wallet svg{width:80%;height:80%}
.ico-store{background:linear-gradient(#bf7cff,#8e3fe0)}
.ico-people{background:linear-gradient(#8e8cf0,#5e5ce6)}
.ico-mine{background:linear-gradient(#4aa3ff,#0a6ee0)}
.ico-telegram{background:linear-gradient(#3ec0f5,#1f9bd8)}
.ico-instagram{background:radial-gradient(circle at 30% 110%,#fdc468 0%,#f1753f 30%,#d62f7b 60%,#8a3ab9 100%)}
.ico-vk{background:linear-gradient(#2b8cff,#0068e0)}
.ico-tiktok{background:#111}
.ico-whatsapp{background:linear-gradient(#5ee07b,#21b04c)}
.ico-youtube{background:linear-gradient(#ff5146,#e00000)}
.ico-link{background:linear-gradient(#aeaeb2,#8e8e93)}
.ico-telegram svg,.ico-instagram svg,.ico-vk svg,.ico-tiktok svg,.ico-whatsapp svg,.ico-youtube svg,.ico-link svg{width:56%;height:56%}
/* Календарь с сегодняшним днём — «Окошки». */
.ico-cal{border-radius:22.5%;overflow:hidden;background:#fff;display:flex;flex-direction:column;align-items:center;
  box-shadow:inset 0 0 0 .5px rgb(0 0 0 / .12),0 1px 2px rgb(0 0 0 / .18),0 3px 6px -3px rgb(0 0 0 / .25)}
.ico-cal em{display:block;width:100%;padding:2px 0 1px;font-style:normal;font-size:calc(var(--app) * .2);font-weight:600;line-height:1.1;text-align:center;
  color:#ff3b30}
.ico-cal b{font-size:calc(var(--app) * .5);font-weight:300;line-height:1.05;color:var(--ink)}

/* Подпись над значком — как у дока Mac. */
.tip{position:fixed;z-index:70;padding:4px 10px;border-radius:7px;font-size:12px;white-space:nowrap;color:var(--ink);
  background:rgb(236 236 240 / .92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 0 0 .5px rgb(0 0 0 / .14),0 6px 16px -6px rgb(0 0 0 / .3);opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s}
.tip.is-on{opacity:1;transform:none}

/* ═══ ОКНА ══════════════════════════════════════════════════════════ */
.win{position:absolute;z-index:20;display:flex;flex-direction:column;overflow:hidden;border-radius:10px;
  background:rgb(250 250 251 / .86);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:0 0 0 .5px rgb(0 0 0 / .18),0 18px 44px -14px rgb(0 0 0 / .3);
  opacity:0;transform:scale(.96);transform-origin:50% 20%;transition:opacity .18s,transform .24s var(--ease),box-shadow .2s}
.win.is-on{opacity:1;transform:none}
.win.is-top{box-shadow:0 0 0 .5px rgb(0 0 0 / .2),0 26px 60px -14px rgb(0 0 0 / .38)}
.win-bar{flex:none;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;height:30px;padding:0 11px;
  background:rgb(236 236 239 / .92);box-shadow:0 .5px 0 rgb(0 0 0 / .1);
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.win.is-drag .win-bar{cursor:grabbing}
.win-title{font-size:11.5px;font-weight:500;color:#4a4a4f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win:not(.is-top) .win-title{color:#a1a1a6}
.lights{display:flex;gap:6px;align-items:center}
.light{position:relative;display:block;width:11px;height:11px;border-radius:50%;border:0;padding:0;background:#dadade;
  box-shadow:inset 0 0 0 .5px rgb(0 0 0 / .14)}
.light:nth-child(1){background:#ff5f57}
.light:nth-child(2){background:#febc2e}
.light:nth-child(3){background:#28c840}
.win:not(.is-top) .light{background:#d6d6da}
.light--close,.light--zoom{cursor:pointer}
/* Касание шире точки: пальцем в 11 пикселей не попасть. */
.light--close::before,.light--zoom::before{content:"";position:absolute;inset:-11px -5px}
.win-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:10px 14px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.win-body.is-more-down:not(:has(.win-act)){-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}
.win-body.is-more-up{-webkit-mask-image:linear-gradient(180deg,transparent,#000 22px);mask-image:linear-gradient(180deg,transparent,#000 22px)}
.win-body.is-more-up.is-more-down:not(:has(.win-act)){-webkit-mask-image:linear-gradient(180deg,transparent,#000 22px,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22px,#000 calc(100% - 26px),transparent)}
.win.is-full{transition:left .28s var(--ease),top .28s var(--ease),width .28s var(--ease),height .28s var(--ease)}
.win-act{position:sticky;bottom:-14px;margin:12px -14px -14px;padding:12px 14px 12px;
  background:linear-gradient(180deg,rgb(250 250 251 / 0),rgb(250 250 251 / .97) 28%)}
.win-act .go{margin-top:0}
.win-act .btn--plain{width:100%;margin-top:6px}

/* ── Finder: строки через одну, выбранная — синим ───────────────────── */
.menu{list-style:none;margin:0;padding:0}
.finder{margin:0 -14px}
.finder li:nth-child(even) .row{background:var(--stripe)}
.row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;min-height:46px;padding:6px 14px;border:0;
  background:none;text-align:left;cursor:pointer;transition:background-color .12s}
.row-shot{width:30px;height:30px;overflow:hidden;background:var(--fill) center/cover;box-shadow:0 .5px 1.5px rgb(0 0 0 / .2)}
.row-shot img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.row-shot img.here{opacity:1}
.row-shot--doc{background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M7 9h16M7 14h16M7 19h11' stroke='%23c7c7cc' stroke-width='1.6'/></svg>") center/cover}
.row-none{width:0}
.row-t{min-width:0}
.row-t b{display:block;font-size:13px;font-weight:500;line-height:1.25;overflow-wrap:anywhere}
.row-t small{display:-webkit-box;margin-top:1px;font-size:11.5px;line-height:1.3;color:var(--ink-2);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-t em{display:block;margin-top:1px;font-style:normal;font-size:11px;color:var(--ink-2)}
.row-r{display:flex;align-items:center;gap:8px}
.row-r s{text-decoration:none;font-size:12.5px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.round{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--fill)}
.round svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.row.is-on{background:var(--sel)!important;color:#fff}
.row.is-on .row-t em,.row.is-on .row-t small,.row.is-on .row-r s{color:rgb(255 255 255 / .82)}
.row.is-on .round{background:rgb(255 255 255 / .25);color:#fff;transform:rotate(45deg)}
.row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgb(10 100 216 / .5)}
.finder-h{margin:14px 0 4px;font-size:11px;font-weight:600;color:var(--ink-2)}
.finder-h:first-child{margin-top:2px}

/* ── «Информация: …» — Get Info ────────────────────────────────────── */
.info-head{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;margin:0 0 10px}
.info-ico{width:38px;height:38px;background:#eee center/cover;box-shadow:0 .5px 2px rgb(0 0 0 / .25)}
.info-head b{display:block;font-size:13px;font-weight:700;overflow-wrap:anywhere}
.info-head small{display:block;font-size:11.5px;color:var(--ink-2)}
.doc{margin:0;white-space:pre-line;font-size:12.5px;line-height:1.5;color:#3a3a3c;overflow-wrap:anywhere}
.cap{margin:14px 0 6px;font-size:11px;font-weight:600;color:var(--ink-2)}
.cap span{margin-left:6px;font-weight:400}
.info{margin:0}
.info div{display:grid;grid-template-columns:96px 1fr;gap:8px;padding:5px 0}
.info dt{font-size:12px;color:var(--ink-2)}
.info dd{margin:0;font-size:12.5px;overflow-wrap:anywhere}
.info a{text-decoration:none;color:var(--link)}
.preview{margin-top:2px;aspect-ratio:4/5;background:#eee center/cover;overflow:hidden}
.preview img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.preview img.here{opacity:1}
.person{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start;margin-top:14px}
.person-shot{width:52px;height:52px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--fill) center/cover;
  font-size:20px;font-weight:600;color:var(--ink-2)}
.person-shot img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.person-shot img.here{opacity:1}
.person-t b{display:block;font-size:14px;font-weight:600}
.person-t small{display:block;margin-top:1px;font-size:11px;color:var(--ink-2)}
.person-t p{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:#3a3a3c}
.person-t .btn{margin-top:8px}
.score{margin:0 0 6px;color:var(--ink-2)}
.score b{font-size:24px;font-weight:600;color:var(--ink)}
.msg{margin:8px 0;padding:8px 12px;border-radius:16px 16px 16px 5px;background:#e9e9eb;max-width:92%}
.msg p{margin:0;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.msg small{display:block;margin-top:3px;font-size:11px;color:var(--ink-2)}
.links{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.walk{margin-top:4px;overflow:hidden;background:#000}
.walk video{width:100%}

/* Тёмное окно «Фото» — раскадровка. */
.win--dark{height:min(76svh,720px);background:#0b0b0c;box-shadow:0 0 0 .5px rgb(255 255 255 / .1),0 26px 60px -14px rgb(0 0 0 / .55)}
.win--dark .win-bar{background:#1e1e20;box-shadow:0 .5px 0 rgb(255 255 255 / .07)}
.win--dark .win-title{color:#b8b8be}
.win--dark .win-body{display:flex;flex-direction:column;overflow:hidden;padding:0}
.reel-head{flex:none;padding:10px 14px 4px;font:400 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;color:#8e8e93}
.reel{flex:1;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 16px;scrollbar-width:none;scroll-snap-type:y proximity}
.reel::-webkit-scrollbar{display:none}
.photo{flex:none;width:min(64%,300px);margin:0 0 14px;aspect-ratio:3/4;background:#1c1c1e center/cover;scroll-snap-align:center}
.photo img,.photo video{width:100%;height:100%;object-fit:cover}
.photo img{opacity:0;transition:opacity .4s}
.photo img.here{opacity:1}
.photo figcaption{margin-top:5px;font:400 10px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8e8e93}
.strip{flex:none;display:flex;gap:4px;overflow-x:auto;overscroll-behavior:contain;padding:8px;background:#000;box-shadow:0 -.5px 0 rgb(255 255 255 / .1);scrollbar-width:none;scroll-snap-type:x proximity}
.strip::-webkit-scrollbar{display:none}
.strip-i{flex:none;width:30px;height:40px;padding:0;border:0;background:#222 center/cover;opacity:.4;cursor:pointer;transition:opacity .2s;scroll-snap-align:center}
.strip-i.is-on{opacity:1;box-shadow:0 0 0 1px #fff}

/* ── Кнопки — Mac, не «таблетки» ─────────────────────────────────────
   Прямоугольник со скруглением 8 px; на телефоне — в полную высоту
   пальца. Главная — цветом салона, остальные — белые с тонким краем. */
.btn,.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border-radius:8px;border:0;
  cursor:pointer;font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none;transition:filter .15s,transform .15s}
.btn:active,.pill:active{transform:scale(.98);filter:brightness(.95)}
.btn--main,.pill--main{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 .5px 0 rgb(255 255 255 / .3),0 .5px 1.5px rgb(0 0 0 / .2)}
.btn--glass,.pill--glass{background:#fff;color:var(--ink);box-shadow:0 0 0 .5px rgb(0 0 0 / .14),0 .5px 1.5px rgb(0 0 0 / .1)}
.pill--line{background:#fff;color:var(--ink);box-shadow:0 0 0 .5px rgb(0 0 0 / .2)}
.btn--plain{background:none;color:var(--link);box-shadow:none;font-weight:400}
.pill--sm{min-height:32px;padding:0 12px;font-size:13px}
.btn[disabled],.pill[disabled]{opacity:.4;pointer-events:none}
.btn:focus-visible,.pill:focus-visible,.chip:focus-visible,.time:focus-visible{outline:2px solid var(--sel);outline-offset:2px}
.go{width:100%;margin-top:16px}
.linkish{display:block;margin:12px 0 0;padding:4px 0;border:0;background:none;cursor:pointer;color:var(--link);font-size:13px;text-align:left}

/* ═══ ЗАПИСЬ — ОКНО «ОКОШКИ» ════════════════════════════════════════ */
.sheet{position:fixed;inset:0;z-index:60}
.sheet-veil{position:absolute;inset:0;background:rgb(0 0 0 / .12);opacity:0;transition:opacity .22s}
.sheet-card{position:absolute;left:6px;right:6px;bottom:calc(var(--safe-b) + 6px);height:min(84svh,760px);max-width:520px;margin:0 auto;
  display:flex;flex-direction:column;overflow:hidden;border-radius:12px;background:rgb(250 250 251 / .95);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:0 0 0 .5px rgb(0 0 0 / .2),0 26px 70px -16px rgb(0 0 0 / .42);
  opacity:0;transform:translateY(18px) scale(.985);transition:opacity .2s,transform .3s var(--ease)}
.sheet.is-on .sheet-veil{opacity:1}
.sheet.is-on .sheet-card{opacity:1;transform:none}
.sheet-top{flex:none;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;height:30px;padding:0 11px;
  background:rgb(236 236 239 / .92);box-shadow:0 .5px 0 rgb(0 0 0 / .1)}
.sheet-top > b{font-size:11.5px;font-weight:500;color:#4a4a4f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-top .win-sp{display:none}
.sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 16px calc(var(--safe-b) + 18px)}
.sheet-body .menu{margin:0 -16px}
.sheet-body .menu li:nth-child(even) .row{background:var(--stripe)}
.sheet-body .row{padding:6px 16px}
.sheet-act{position:sticky;bottom:calc(-1 * (var(--safe-b) + 18px));z-index:2;margin:0 -16px calc(-1 * (var(--safe-b) + 18px));
  padding:14px 16px calc(var(--safe-b) + 14px);background:linear-gradient(180deg,rgb(250 250 251 / 0),rgb(250 250 251 / .97) 30%)}
.sheet-act .go{margin-top:0}
.label{margin:16px 0 7px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.hscroll{display:flex;gap:6px;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.hscroll::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:34px;padding:0 12px;border-radius:8px;border:0;cursor:pointer;background:#fff;color:var(--ink);font-size:13px;
  box-shadow:0 0 0 .5px rgb(0 0 0 / .14)}
.chip.is-on{background:var(--sel);color:#fff;box-shadow:none}
.times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.time{min-height:38px;border-radius:8px;border:0;cursor:pointer;background:#fff;font-size:14px;font-variant-numeric:tabular-nums;box-shadow:0 0 0 .5px rgb(0 0 0 / .14)}
.time.is-on{background:var(--sel);color:#fff;box-shadow:none}
.time i{display:block;font-style:normal;font-size:10px;color:var(--ink-2)}
.time.is-on i{color:rgb(255 255 255 / .75)}
.hint{margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.why{min-height:16px;margin:6px 0 0;font-size:12px;color:#d70015}
.fld{display:block;margin-top:10px}
.fld span{display:block;margin-bottom:4px;font-size:11.5px;color:var(--ink-2)}
.fld input{width:100%;min-height:40px;padding:0 11px;border-radius:7px;border:0;background:#fff;color:var(--ink);font:inherit;font-size:16px;
  outline:none;box-shadow:0 0 0 .5px rgb(0 0 0 / .22),inset 0 .5px 1px rgb(0 0 0 / .06);transition:box-shadow .15s}
.fld input:focus{box-shadow:0 0 0 3px rgb(10 122 255 / .35),0 0 0 .5px rgb(10 100 216 / .8)}
.tick{display:flex;gap:9px;align-items:flex-start;margin-top:10px;font-size:12px;line-height:1.4;color:var(--ink-2)}
.tick a{color:var(--link)}
/* Галочка — как в macOS: маленький квадрат, отмечен — синим. */
.tick input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:16px;height:16px;margin:1px 0 0;border-radius:4px;cursor:pointer;
  background:#fff;box-shadow:0 0 0 .5px rgb(0 0 0 / .3),inset 0 .5px 1px rgb(0 0 0 / .08)}
.tick input:checked{background:var(--sel);box-shadow:none}
.tick input::after{content:"";position:absolute;inset:2px;opacity:0;background:#fff;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.tick input:checked::after{opacity:1}
.tick input:focus-visible{outline:2px solid var(--sel);outline-offset:2px}
.done{text-align:center;padding:16px 0 6px}
.done b{display:block;font-size:20px;font-weight:600}
.done p{margin:5px 0 0;color:var(--ink-2)}
.ticket,.pay,.visit,.card{padding:12px 14px;border-radius:9px;background:#fff;box-shadow:0 0 0 .5px rgb(0 0 0 / .12)}
.ticket b{display:block;font-size:14px;font-weight:600}
.ticket span{display:block;margin-top:2px;font-size:12px;color:var(--ink-2)}
.pay{margin-top:12px}
.pay > b{font-size:16px;font-weight:600}
.proof{margin-top:12px;padding-top:2px;border-top:.5px solid var(--line)}
.proof .go{margin-top:10px}
.proof .linkish{margin:10px auto 0;text-align:center}
.pay-ok{margin:12px 0 0;font-size:13.5px;font-weight:600;line-height:1.35}
.pay-addr{margin-top:12px;padding-top:12px;border-top:.5px solid var(--line)}
.pay-addr b{font-size:13.5px;font-weight:600}
.pay-addr .hint{white-space:pre-line}
.proof-next{margin-top:6px;text-align:center}
.visit{margin-top:8px}
.visit-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.visit-top b{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.badge{font-size:11px;color:var(--ink-2)}
.visit-pay{margin:5px 0 0;font-size:12px;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.visit-addr{white-space:pre-line}
.visit-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.cards{display:grid;grid-template-columns:1fr;gap:8px}
.card{display:flex;flex-direction:column;gap:3px;text-decoration:none}
.card b{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.card span{font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
.card strong{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.card .pill{align-self:flex-start;margin-top:6px}
.stars{display:flex;gap:6px;justify-content:center;margin:10px 0 6px}
.stars button{width:40px;height:40px;border:0;background:none;cursor:pointer;color:#d1d1d6;transition:color .2s}
.stars button svg{width:30px;height:30px;fill:currentColor}
.stars button.is-on{color:#ff9f0a}
.act{padding:0}
#demo audio{width:100%;margin-top:10px}
.said-now{position:fixed;z-index:80;left:16px;right:16px;bottom:calc(var(--safe-b) + 76px);max-width:380px;margin:0 auto;
  padding:10px 14px;border-radius:10px;background:rgb(40 40 42 / .92);color:#fff;font-size:13px;text-align:center;
  box-shadow:0 10px 28px -8px rgb(0 0 0 / .4);animation:said .3s var(--ease)}
@keyframes said{from{opacity:0;transform:translateY(6px)}}

body.boot .icons,body.boot .dock{opacity:0}

@media (min-width:700px){
  :root{--thumb:52px;--app:48px}
  .icon{width:96px}
  .icon-name{font-size:9.5px}
  .wall-photo{width:min(64vw,900px);height:min(92vh,900px)}
  .menu-items{display:flex}
  .menubar{font-size:13px}
  .sheet-card{bottom:auto;top:50%;transform:translateY(-47%) scale(.985)}
  .sheet.is-on .sheet-card{transform:translateY(-50%)}
}
@media (max-width:360px){
  :root{--thumb:36px;--app:34px}
  .icon{width:66px}
}
@media (prefers-reduced-motion:reduce){
  .icon,.note,.win,.sheet-card,.sheet-veil,.tip{transition:none}
  .icon{transform:translate(-50%,-50%);opacity:1}
  .dock-i.is-bounce{animation:none}
}