/* homade.ru — «Мобильное приложение» в подвале + лист установки PWA. «Ночной сад»: ночь, слива, латунь, лепестки.
   Подключается из подвала (не блокирует первый экран). Пара к /assets/app-install.js. */
:root{
  --ai-surface:var(--surface,#fff); --ai-ink:var(--ink,#2E2139); --ai-muted:var(--muted,#655970); --ai-line:var(--line,#E3D7E7);
  --ai-hl:var(--accent,#6E4A7E); --ai-focus:#C9A56A; --ai-icon-ring:rgba(201,165,106,.6);
  --ai-shade:rgba(42,30,52,.75); --ai-glow:rgba(110,74,126,.8);
  --ai-card-bg:radial-gradient(70% 120% at 100% 0%,rgba(201,165,106,.20),transparent 60%),radial-gradient(60% 120% at 0% 100%,rgba(243,198,213,.45),transparent 65%),linear-gradient(150deg,rgba(255,255,255,.85),rgba(250,244,250,.6));
  --ai-card-brd:rgba(110,74,126,.18);
  --ai-sheet-bg:radial-gradient(80% 60% at 100% 0%,rgba(201,165,106,.16),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(243,198,213,.38),transparent 65%),#fff;
  --ai-chip:#F4ECF5; --ai-backdrop:rgba(21,15,27,.5);
  --ai-badge-bg:linear-gradient(160deg,#33253F,#150F1B 70%); --ai-badge-ink:#fff; --ai-badge-sub:rgba(255,255,255,.72);
  --ai-badge-brd:rgba(230,200,143,.42); --ai-badge-brd-hi:rgba(230,200,143,.85); --ai-badge-glyph:#E6C88F;
  --ai-pill-bg:linear-gradient(140deg,#6E4A7E,#2A1E34); --ai-pill-ink:#fff;
  --ai-num-bg:linear-gradient(140deg,#E6C88F,#C9A56A); --ai-num-ink:#2A1E34;
  --ai-pri-bg:linear-gradient(140deg,#7B5590,#2A1E34); --ai-pri-ink:#fff; --ai-pri-brd:rgba(230,200,143,.45);
  --ai-fd:var(--fd,'Playfair Display',Georgia,serif); --ai-fb:var(--fb,'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif);
}
:root[data-theme='dark']{
  --ai-hl:#E6C88F; --ai-shade:rgba(0,0,0,.8); --ai-glow:rgba(150,95,180,.6);
  --ai-card-bg:radial-gradient(70% 120% at 100% 0%,rgba(214,170,100,.16),transparent 60%),radial-gradient(60% 120% at 0% 100%,rgba(150,95,180,.26),transparent 65%),linear-gradient(150deg,rgba(48,35,58,.8),rgba(32,23,40,.6));
  --ai-card-brd:rgba(232,205,255,.14);
  --ai-sheet-bg:radial-gradient(80% 60% at 100% 0%,rgba(214,170,100,.14),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(150,95,180,.24),transparent 65%),#211829;
  --ai-chip:rgba(255,255,255,.06); --ai-backdrop:rgba(8,5,11,.66);
}
/* лепесток на карточке */
.ai-card::after{content:"";position:absolute;width:10px;height:15px;right:34%;top:14px;border-radius:80% 0 80% 0;background:linear-gradient(135deg,#F7D7E2,#E2A9BF);opacity:.7;transform:rotate(-24deg);pointer-events:none}

/* ---------- карточка в подвале ---------- */
.ai-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 22px;margin:34px 0 6px;padding:22px 24px;border:1px solid var(--ai-card-brd);border-radius:26px;background:var(--ai-card-bg);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 24px 50px -34px var(--ai-shade);overflow:hidden;isolation:isolate;color:var(--ai-ink);font-family:var(--ai-fb)}
.ai-card::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--ai-icon-ring),transparent);pointer-events:none}
.ai-card-icon{width:68px;height:68px;border-radius:18px;box-shadow:0 12px 26px -12px var(--ai-shade),0 0 0 1px var(--ai-icon-ring)}
.ai-card-kicker{margin:0;font:700 11px/1.3 var(--ai-fb);letter-spacing:.16em;text-transform:uppercase;color:var(--ai-hl)}
.ai-card-title{margin:4px 0 0;font:600 25px/1.15 var(--ai-fd);letter-spacing:-.01em;color:var(--ai-ink)}
.ai-card-sub{margin:6px 0 0;max-width:44ch;font-size:14px;line-height:1.5;color:var(--ai-muted)}
.ai-card-side{display:flex;align-items:center;gap:18px}
.ai-card-btns{display:flex;flex-wrap:wrap;gap:10px}
.ai-card-qr{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;font-size:11px;line-height:1.3;white-space:nowrap;color:var(--ai-muted);text-align:center}
.ai-card-qr img{width:92px;height:92px;padding:7px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--ai-line),0 10px 24px -16px var(--ai-shade)}

/* бейдж: честная кнопка «Установить на …», без логотипов магазинов */
.ai-badge{display:inline-flex;align-items:center;gap:11px;min-height:54px;padding:8px 18px 8px 14px;border-radius:15px;border:1px solid var(--ai-badge-brd);background:var(--ai-badge-bg);color:var(--ai-badge-ink) !important;text-decoration:none !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 24px -14px var(--ai-shade);transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .18s,box-shadow .18s;-webkit-tap-highlight-color:transparent}
.ai-badge:hover{transform:translateY(-2px);border-color:var(--ai-badge-brd-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 30px -14px var(--ai-glow)}
.ai-badge:active{transform:translateY(0) scale(.98)}
.ai-badge:focus-visible{outline:2px solid var(--ai-focus);outline-offset:3px}
.ai-badge .ai-glyph{width:24px;height:24px;flex:none;color:var(--ai-badge-glyph)}
.ai-badge span{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.ai-badge small{font:500 10.5px/1.2 var(--ai-fb);letter-spacing:.02em;color:var(--ai-badge-sub)}
.ai-badge b{font:700 16.5px/1.2 var(--ai-fb);letter-spacing:-.01em}

@media (max-width:900px){.ai-card{grid-template-columns:auto minmax(0,1fr)}.ai-card-side{grid-column:1/-1}}
@media (max-width:560px){
  .ai-card{grid-template-columns:1fr;justify-items:center;text-align:center;padding:24px 18px 20px;gap:14px}
  .ai-card-sub{margin-inline:auto}
  .ai-card-side{width:100%;justify-content:center}
  .ai-card-btns{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .ai-badge{justify-content:center;padding:8px 10px;gap:9px}
  .ai-badge b{font-size:15px}
}
@media (hover:none),(max-width:900px){.ai-card-qr{display:none}}

/* ---------- лист с инструкцией ---------- */
html.ai-lock{overflow:hidden}
.ai-dlg{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:16px;border:0;background:transparent;color:var(--ai-ink);font-family:var(--ai-fb);text-align:left;display:none;align-items:center;justify-content:center;overflow:auto}
.ai-dlg[open]{display:flex}
.ai-dlg::backdrop{background:var(--ai-backdrop);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:ai-fade .22s ease-out}
.ai-sheet{position:relative;width:min(760px,100%);padding:30px 30px 24px;border-radius:28px;border:1px solid var(--ai-card-brd);background:var(--ai-sheet-bg);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 40px 100px -30px var(--ai-shade);animation:ai-pop .26s cubic-bezier(.22,1,.36,1)}
.ai-dlg.ai-closing .ai-sheet{animation:ai-pop-out .19s ease-in forwards}
.ai-dlg.ai-closing::backdrop{animation:ai-fade-out .19s ease-in forwards}
.ai-grab{display:none}
.ai-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--ai-line);background:var(--ai-chip);color:var(--ai-muted);cursor:pointer;transition:color .15s,transform .15s}
.ai-x:hover{color:var(--ai-ink)}
.ai-x:active{transform:scale(.94)}
.ai-x .ai-ic{width:18px;height:18px}
.ai-head{display:flex;align-items:center;gap:16px;padding-right:44px}
.ai-app-icon{width:64px;height:64px;flex:none;border-radius:17px;box-shadow:0 12px 26px -12px var(--ai-shade),0 0 0 1px var(--ai-icon-ring)}
.ai-kicker{margin:0;font:700 11px/1.3 var(--ai-fb);letter-spacing:.16em;text-transform:uppercase;color:var(--ai-hl)}
.ai-head h2{margin:3px 0 0;font:600 27px/1.12 var(--ai-fd);letter-spacing:-.01em;color:var(--ai-ink)}
.ai-host{margin:3px 0 0;font-size:13px;color:var(--ai-muted)}

.ai-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:22px 0 4px;padding:4px;border-radius:14px;border:1px solid var(--ai-line);background:var(--ai-chip)}
.ai-seg button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--ai-muted);font:600 15px var(--ai-fb);cursor:pointer;transition:color .2s}
.ai-seg button[aria-selected='true']{color:var(--ai-pill-ink)}
.ai-seg button:focus-visible{outline:2px solid var(--ai-focus);outline-offset:2px}
.ai-seg .ai-glyph{width:18px;height:18px}
.ai-seg-pill{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:var(--ai-pill-bg);box-shadow:0 8px 18px -10px var(--ai-shade);transition:transform .28s cubic-bezier(.22,1,.36,1)}
.ai-sheet[data-platform='android'] .ai-seg-pill{transform:translateX(100%)}

.ai-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;margin-top:14px}
.ai-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px;animation:ai-fade .25s ease-out}
.ai-step{display:flex;gap:14px;align-items:flex-start;padding:10px 4px}
.ai-step+.ai-step{border-top:1px dashed var(--ai-line)}
.ai-step-ic{position:relative;display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;background:var(--ai-chip);border:1px solid var(--ai-line);color:var(--ai-hl)}
.ai-step-ic .ai-ic{width:20px;height:20px}
.ai-step-ic i{position:absolute;top:-6px;left:-6px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--ai-num-bg);color:var(--ai-num-ink);font:800 10.5px/1 var(--ai-fb);font-style:normal}
.ai-step-tx{display:flex;flex-direction:column;gap:3px;padding-top:1px}
.ai-step-tx b{font-weight:700;font-size:15.5px;line-height:1.35;color:var(--ai-ink)}
.ai-step-tx b b{color:var(--ai-hl)}
.ai-step-tx small{font-size:13.5px;line-height:1.45;color:var(--ai-muted)}

.ai-qr{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;padding:16px;border-radius:22px;border:1px solid var(--ai-line);background:var(--ai-chip)}
.ai-qr img{width:168px;height:168px;padding:10px;border-radius:16px;background:#fff;box-shadow:0 14px 30px -18px var(--ai-shade)}
.ai-qr figcaption{font-size:12.5px;line-height:1.4;text-align:center;color:var(--ai-muted)}

.ai-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ai-btn{flex:1 1 220px;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 22px;border-radius:15px;font:700 15.5px var(--ai-fb);text-decoration:none !important;cursor:pointer;transition:transform .16s,filter .16s,box-shadow .16s;-webkit-tap-highlight-color:transparent}
.ai-btn .ai-ic{width:18px;height:18px}
.ai-btn-pri{border:1px solid var(--ai-pri-brd);background:var(--ai-pri-bg);color:var(--ai-pri-ink) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 30px -16px var(--ai-glow)}
.ai-btn-sec{border:1px solid var(--ai-line);background:var(--ai-chip);color:var(--ai-ink) !important}
.ai-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.ai-btn:active{transform:scale(.98)}
.ai-btn:focus-visible{outline:2px solid var(--ai-focus);outline-offset:3px}
.ai-note{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--ai-muted);text-align:center}

/* телефон: нижний лист без QR */
@media (max-width:640px),(hover:none) and (pointer:coarse){
  .ai-dlg{padding:0;align-items:flex-end}
  .ai-sheet{width:100%;max-height:92dvh;overflow:auto;padding:12px 18px calc(18px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;border-bottom:0;animation:ai-up .3s cubic-bezier(.22,1,.36,1)}
  .ai-dlg.ai-closing .ai-sheet{animation:ai-down .19s ease-in forwards}
  .ai-grab{display:block;width:42px;height:5px;margin:0 auto 14px;border-radius:9px;background:var(--ai-line)}
  .ai-x{top:12px;right:12px}
  .ai-head h2{font-size:23px}
  .ai-app-icon{width:56px;height:56px;border-radius:15px}
  .ai-body{grid-template-columns:1fr;margin-top:8px}
  .ai-qr{display:none}
}
@keyframes ai-fade{from{opacity:0}}
@keyframes ai-fade-out{to{opacity:0}}
@keyframes ai-pop{from{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes ai-pop-out{to{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes ai-up{from{transform:translateY(100%)}}
@keyframes ai-down{to{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){
  .ai-sheet,.ai-steps,.ai-dlg::backdrop{animation:none !important}
  .ai-seg-pill,.ai-badge,.ai-btn{transition:none}
}