/* ============================================================
Дар Кофе · дизайн-слой 2026 (визуал, без логики)
Подключается ПОСЛЕ dar-season.css. Только CSS: классы и DOM не меняются.
Идея: осенние листья остаются в шапке-«герое», контент — на чистом
кремовом фоне, белые карточки, крупная типографика, тёмный ink,
акцент — розово-коралловый градиент (холодное — фиолетово-синий).
============================================================ */
html body .stage .device .screen{
--dd-ink:#2A1518;
--dd-ink2:#5C3B42;
--dd-mute:#8F767C;
--dd-line:rgba(42,21,24,.07);
--dd-card:#FFFFFF;
--dd-soft:#F6F0EE;
--dd-a1:#E0457F;
--dd-a2:#FF6B57;
--dd-grad:linear-gradient(120deg,#E0457F 0%,#FF6B57 100%);
--dd-grad-soft:#FFF0F5;
--dd-shadow:0 10px 30px -18px rgba(90,35,25,.28);
--dd-shadow-lg:0 18px 40px -20px rgba(90,35,25,.38);
--dd-r:20px;
}
html body .stage .device .screen.cold{
--dd-a1:#7C4FD6;
--dd-a2:#4F8DF7;
--dd-grad:linear-gradient(120deg,#7C4FD6 0%,#4F8DF7 100%);
--dd-grad-soft:#F1EEFF;
--dd-soft:#F1F0F8;
--dd-shadow:0 10px 30px -18px rgba(50,35,110,.28);
--dd-shadow-lg:0 18px 40px -20px rgba(50,35,110,.38);
}
/* ---------- Фон экрана: чистый крем вместо обоев на весь экран ---------- */
html body .stage .device .screen.screen.screen.screen.screen:not(.cold):not(.vitrina-mode):not(.profile),
html body .stage .device .screen.screen.screen.screen.screen.vitrina-mode,
html body .stage .device .screen.screen.screen.screen.screen.profile{
background-color:#FFF6F0 !important;
background-image:
radial-gradient(120% 60% at 50% -10%, rgba(255,190,140,.35) 0%, rgba(255,190,140,0) 60%),
linear-gradient(180deg,#FFF7F1 0%,#FDF1EA 100%) !important;
background-size:auto !important;
background-position:center top !important;
background-repeat:no-repeat !important;
}
html body .stage .device .screen.screen.screen.screen.screen.cold:not(.vitrina-mode):not(.profile){
background-color:#F3F4FD !important;
background-image:
radial-gradient(120% 60% at 50% -10%, rgba(150,160,255,.28) 0%, rgba(150,160,255,0) 60%),
linear-gradient(180deg,#F5F5FE 0%,#EEF0FA 100%) !important;
background-size:auto !important;
background-repeat:no-repeat !important;
}
html body .stage .device{
background:#F3E9E4;
box-shadow:0 40px 90px -30px rgba(90,35,25,.35),0 0 0 2px #EADCD6;
}
/* ---------- Шапка-«герой»: листья живут только здесь ---------- */
html body .stage .device .screen .dar-season-pin,
html body .stage .device .screen .dar-local-pin{
border-radius:0 0 28px 28px !important;
box-shadow:0 18px 36px -22px rgba(90,30,10,.55) !important;
padding-bottom:12px !important;
margin-bottom:4px !important;
}
html body .stage .device .screen .dar-season-pin::before,
html body .stage .device .screen .dar-local-pin::before{
height:100% !important;
bottom:0 !important;
border-radius:inherit !important;
background-color:#F09A2A !important;
background-image:
linear-gradient(180deg, rgba(60,18,10,.10) 0%, rgba(60,18,10,0) 28%, rgba(60,18,10,.22) 72%, rgba(60,18,10,.42) 100%),
url('./assets/bg-leaves.jpg') !important;
background-size:cover, cover !important;
background-position:center top, center 28% !important;
background-repeat:no-repeat !important;
}
/* кнопка «Моя карта» / «Меню» — матовое стекло, тёмный текст */
html body .stage .device .screen .mycardbtn,
html body .stage .device .screen .dar-season-pin .mycardbtn,
html body .stage .device .screen .app-head .mycardbtn{
background:rgba(255,255,255,.94) !important;
background-image:none !important;
color:var(--dd-ink) !important;
-webkit-text-fill-color:var(--dd-ink) !important;
border:1px solid rgba(255,255,255,.9) !important;
border-radius:999px !important;
box-shadow:0 12px 26px -16px rgba(60,20,10,.6) !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-weight:700 !important;
letter-spacing:-.01em !important;
-webkit-backdrop-filter:blur(14px) !important;
backdrop-filter:blur(14px) !important;
text-shadow:none !important;
transition:transform .15s ease, box-shadow .2s ease !important;
}
html body .stage .device .screen .mycardbtn:active{ transform:scale(.97) !important; }
html body .stage .device .screen .mycardbtn .mycardbtn-txt,
html body .stage .device .screen .mycardbtn .mycardbtn-ic{
color:var(--dd-ink) !important;
-webkit-text-fill-color:var(--dd-ink) !important;
background:none !important;
text-shadow:none !important;
filter:none !important;
}
html body .stage .device .screen .mycardbtn .mycardbtn-ic{ stroke:var(--dd-ink) !important; }
/* слоган: дисплейный шрифт, чистый белый */
html body .stage .device .screen .app-tagline-t1,
html body .stage .device .screen .dar-season-pin .app-tagline-t1{
font-family:'Unbounded',sans-serif !important;
font-weight:700 !important;
font-size:14px !important;
line-height:1.2 !important;
letter-spacing:-.01em !important;
color:#FFFDF9 !important;
-webkit-text-fill-color:#FFFDF9 !important;
}
html body .stage .device .screen .app-tagline-t2,
html body .stage .device .screen .dar-season-pin .app-tagline-t2{
font-family:'Rubik',system-ui,sans-serif !important;
font-weight:500 !important;
font-size:11.5px !important;
line-height:1.3 !important;
color:rgba(255,250,244,.92) !important;
-webkit-text-fill-color:rgba(255,250,244,.92) !important;
}
html body .stage .device .screen .app-tagline-t3,
html body .stage .device .screen .dar-season-pin .app-tagline-t3{
font-family:'Rubik',system-ui,sans-serif !important;
font-weight:700 !important;
font-size:8.5px !important;
letter-spacing:.22em !important;
text-transform:uppercase !important;
color:#FFE3BF !important;
-webkit-text-fill-color:#FFE3BF !important;
}
html body .stage .device .screen .app-tagline{
filter:drop-shadow(0 1px 2px rgba(40,10,8,.55)) drop-shadow(0 4px 14px rgba(40,10,8,.25)) !important;
}
/* адрес — тёмное стекло */
html body .stage .device .screen .place-chip,
html body .stage .device .screen .dar-season-pin .place-chip{
background:rgba(42,21,24,.46) !important;
background-image:none !important;
border:1px solid rgba(255,255,255,.22) !important;
border-radius:999px !important;
box-shadow:0 8px 20px -14px rgba(0,0,0,.5) !important;
color:#fff !important;
-webkit-backdrop-filter:blur(16px) saturate(1.2) !important;
backdrop-filter:blur(16px) saturate(1.2) !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-weight:600 !important;
}
html body .stage .device .screen .place-chip-addr{ color:#fff !important; font-weight:700 !important; }
html body .stage .device .screen .place-chip-dot{ color:rgba(255,255,255,.45) !important; opacity:1 !important; }
html body .stage .device .screen .place-chip-hrs{ color:#FFD27A !important; font-weight:700 !important; }
html body .stage .device .screen .place-chip-ic{ opacity:1 !important; }
/* сегмент «Горячее · Витрина · Холодное» — тёмное стекло + белый ползунок */
html body .stage .device .screen .modes.modes3,
html body .stage .device .screen .dar-season-pin .modes.modes3{
background:rgba(42,21,24,.40) !important;
background-image:none !important;
border:1px solid rgba(255,255,255,.18) !important;
box-shadow:none !important;
-webkit-backdrop-filter:blur(16px) saturate(1.2) !important;
backdrop-filter:blur(16px) saturate(1.2) !important;
margin:8px 14px 0 !important;
height:44px !important;
min-height:44px !important;
}
html body .stage .device .screen .modes .mthumb,
html body .stage .device .screen .modes.modes3 .mthumb.m3{
background:#FFFFFF !important;
background-image:none !important;
box-shadow:0 6px 16px -6px rgba(30,8,8,.55) !important;
border-radius:999px !important;
}
html body .stage .device .screen .modes.modes3 .modeb{
font-family:'Unbounded',sans-serif !important;
font-weight:700 !important;
font-size:11px !important;
letter-spacing:.01em !important;
height:38px !important;
text-shadow:none !important;
transition:color .25s ease !important;
}
html body .stage .device .screen .modes.modes3 .modeb:not(.on),
html body .stage .device .screen .modes.modes3 .modeb:not(.on) span,
html body .stage .device .screen .modes.modes3 .mode-vitrina:not(.on) span{
color:rgba(255,250,244,.92) !important;
-webkit-text-fill-color:rgba(255,250,244,.92) !important;
background:none !important;
text-shadow:none !important;
filter:none !important;
}
html body .stage .device .screen .modes.modes3 .modeb.on,
html body .stage .device .screen .modes.modes3 .modeb.on span,
html body .stage .device .screen .modes.modes3 .mode-vitrina.on span{
color:var(--dd-ink) !important;
-webkit-text-fill-color:var(--dd-ink) !important;
background:none !important;
text-shadow:none !important;
filter:none !important;
}
html body .stage .device .screen .modes.modes3 .modeb .mode-ic{ stroke:currentColor !important; opacity:.9 !important; }
/* полоска «живого» заказа под табами */
html body .stage .device .screen .tk-bar{
background:rgba(255,255,255,.94) !important;
color:var(--dd-ink) !important;
border:1px solid rgba(255,255,255,.9) !important;
border-radius:999px !important;
box-shadow:0 10px 24px -16px rgba(60,20,10,.5) !important;
}
/* ---------- Секции ---------- */
html body .stage .device .screen .menusec{ padding:18px 16px 0 !important; }
html body .stage .device .screen .menusec .sec-t,
html body .stage .device .screen .sec-t,
html body .stage .device .screen.vitrina-mode .sec-t,
html body .stage .device .screen.vitrina-mode .menusec.sec-bowls .sec-t{
display:flex !important;
align-items:center !important;
gap:9px !important;
margin:0 2px 10px !important;
padding:0 !important;
background:none !important;
background-image:none !important;
border:0 !important;
box-shadow:none !important;
border-radius:0 !important;
font-family:'Unbounded',sans-serif !important;
font-weight:800 !important;
font-size:13px !important;
line-height:1.25 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
color:var(--dd-ink) !important;
-webkit-text-fill-color:var(--dd-ink) !important;
-webkit-background-clip:unset !important;
background-clip:unset !important;
opacity:1 !important;
text-shadow:none !important;
}
html body .stage .device .screen .menusec .sec-t::before,
html body .stage .device .screen .sec-t::before{
content:"" !important;
display:inline-block !important;
width:8px !important;
height:8px !important;
border-radius:50% !important;
background:var(--dd-grad) !important;
opacity:1 !important;
flex:none !important;
padding:0 !important;
border:0 !important;
box-shadow:0 0 0 4px var(--dd-grad-soft) !important;
pointer-events:none !important;
}
html body .stage .device .screen .sec-sub{
color:var(--dd-mute) !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-size:12px !important;
font-weight:500 !important;
letter-spacing:0 !important;
text-transform:none !important;
margin:-4px 2px 10px !important;
}
/* ---------- Карточки напитков ---------- */
html body .stage .device .screen .items{ gap:8px !important; margin-top:2px !important; }
html body .stage .device .screen .item.single,
html body .stage .device .screen:not(.cold) .item.single,
html body .stage .device .screen.cold .item.single,
html body .stage .device .screen.vitrina-mode .item.single,
html.dc-android body .stage .device .screen .item.single,
html.dc-android body .stage .device .screen.cold .item.single{
background:var(--dd-card) !important;
background-image:none !important;
border:1px solid var(--dd-line) !important;
border-radius:var(--dd-r) !important;
padding:12px 12px 12px 14px !important;
box-shadow:var(--dd-shadow) !important;
transition:transform .18s ease, box-shadow .25s ease !important;
}
html body .stage .device .screen .item.single:active{ transform:scale(.995) !important; }
html body .stage .device .screen .item .nmt{
font-family:'Rubik',system-ui,sans-serif !important;
font-weight:600 !important;
font-size:15px !important;
line-height:1.3 !important;
letter-spacing:-.01em !important;
color:var(--dd-ink) !important;
}
html body .stage .device .screen .item .bnote,
html body .stage .device .screen .item .n-sub{
color:var(--dd-mute) !important;
font-size:12px !important;
line-height:1.4 !important;
}
html body .stage .device .screen .item .fav{ color:rgba(42,21,24,.18) !important; }
html body .stage .device .screen .item .fav.on{ color:var(--dd-a1) !important; }
/* бейджи «хит» / «фишка» / «без кофеина» */
html body .stage .device .screen .badge{
font-family:'Unbounded',sans-serif !important;
font-size:8.5px !important;
font-weight:700 !important;
letter-spacing:.04em !important;
padding:4px 8px !important;
border-radius:999px !important;
background:var(--dd-grad) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
box-shadow:0 6px 12px -8px rgba(224,69,127,.7) !important;
border:0 !important;
}
html body .stage .device .screen .badge.star{
background:linear-gradient(120deg,#D6F05A 0%,#9ED62A 100%) !important;
color:#1F2E08 !important;
-webkit-text-fill-color:#1F2E08 !important;
box-shadow:0 6px 12px -8px rgba(120,170,30,.6) !important;
}
html body .stage .device .screen .dec{
background:#F3EEF9 !important;
color:#6E4BC2 !important;
-webkit-text-fill-color:#6E4BC2 !important;
border:0 !important;
border-radius:999px !important;
}
/* чипы размеров: мягкая подложка, тёмная цена */
html body .stage .device .screen .item .iright{ gap:5px !important; }
html body .stage .device .screen .item .iright .sz,
html body .stage .device .screen .item.single .iright .sz,
html body .stage .device .screen.cold .item.single .iright .sz{
width:50px !important;
min-width:50px !important;
height:42px !important;
border-radius:13px !important;
gap:2px !important;
padding:5px 2px 4px !important;
background:var(--dd-soft) !important;
background-image:none !important;
border:1px solid transparent !important;
box-shadow:none !important;
transition:background .2s ease, transform .15s ease !important;
}
html body .stage .device .screen .item .iright .sz:active{ transform:scale(.95) !important; }
html body .stage .device .screen .item .iright .sz .szv{
color:var(--dd-mute) !important;
opacity:1 !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-size:9px !important;
font-weight:600 !important;
}
html body .stage .device .screen .item .iright .sz b{
color:var(--dd-ink) !important;
-webkit-text-fill-color:var(--dd-ink) !important;
font-family:'Unbounded',sans-serif !important;
font-size:12.5px !important;
font-weight:700 !important;
}
html body .stage .device .screen .item .iright .sz.on,
html body .stage .device .screen .item.single .iright .sz.on{
background:var(--dd-grad) !important;
border-color:transparent !important;
box-shadow:0 8px 18px -10px rgba(224,69,127,.7) !important;
}
html body .stage .device .screen .item .iright .sz.on .szv{ color:rgba(255,255,255,.75) !important; }
html body .stage .device .screen .item .iright .sz.on b{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* кнопка «+» (кастомизация) — круглая, акцентная */
html body .stage .device .screen .item .iright .cust,
html body .stage .device .screen .item.single .iright .cust{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:40px !important;
border-radius:50% !important;
padding:0 !important;
background:var(--dd-grad) !important;
background-image:var(--dd-grad) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
border:0 !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-size:22px !important;
font-weight:500 !important;
line-height:1 !important;
box-shadow:0 10px 20px -10px rgba(224,69,127,.75) !important;
transition:transform .15s ease, box-shadow .2s ease !important;
}
html body .stage .device .screen .item .iright .cust:active{ transform:scale(.92) !important; }
html body .stage .device .screen .item .iright .cust.cust-wide{
width:auto !important;
max-width:70px !important;
border-radius:999px !important;
padding:0 11px !important;
font-size:10px !important;
font-weight:700 !important;
letter-spacing:.02em !important;
}
html body .stage .device .screen.cold .item .iright .cust{ box-shadow:0 10px 20px -10px rgba(124,79,214,.75) !important; }
html body .stage .device .screen.cold .item .iright .sz.on{ box-shadow:0 8px 18px -10px rgba(124,79,214,.7) !important; }
html body .stage .device .screen.cold .badge{ box-shadow:0 6px 12px -8px rgba(124,79,214,.7) !important; }
/* счётчик на чипе */
html body .stage .device .screen .item .iright .qhost,
html body .stage .device .screen:not(.vitrina-mode) .item.item.single .iright .sz .qhost,
html body .stage .device .screen.vitrina-mode .item.item.single .iright .sz .qhost{
background:var(--dd-ink) !important;
box-shadow:0 6px 14px -4px rgba(0,0,0,.45), 0 0 0 2px #fff !important;
top:-11px !important;
right:-10px !important;
}
html body .stage .device .screen .item .iright .qhost .qn,
html body .stage .device .screen:not(.vitrina-mode) .item.item.single .iright .sz .qhost .qn{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
html body .stage .device .screen .item .iright .qhost .qminus,
html body .stage .device .screen:not(.vitrina-mode) .item.item.single .iright .sz .qhost .qminus{
background:rgba(255,255,255,.22) !important;
background-image:none !important;
color:#fff !important;
box-shadow:none !important;
}
/* заметки в секциях */
html body .stage .device .screen .note{
background:var(--dd-card) !important;
border:1px solid var(--dd-line) !important;
border-left:3px solid var(--dd-a1) !important;
border-radius:14px !important;
color:var(--dd-ink2) !important;
box-shadow:var(--dd-shadow) !important;
}
html body .stage .device .screen .note-go{ color:var(--dd-a1) !important; }
/* ---------- Карточки «сегодня» / промо / повтор заказа ---------- */
html body .stage .device .screen .today-card,
html body .stage .device .screen .last-order-cta{
background:var(--dd-card) !important;
background-image:none !important;
border:1px solid var(--dd-line) !important;
border-radius:22px !important;
box-shadow:var(--dd-shadow-lg) !important;
}
html body .stage .device .screen .today-k,
html body .stage .device .screen .last-order-cta-h{ color:var(--dd-mute) !important; letter-spacing:.08em !important; }
html body .stage .device .screen .today-n,
html body .stage .device .screen .last-order-cta-t{ color:var(--dd-ink) !important; font-family:'Unbounded',sans-serif !important; font-weight:700 !important; }
html body .stage .device .screen .today-m,
html body .stage .device .screen .last-order-cta-s{ color:var(--dd-mute) !important; }
html body .stage .device .screen .today-cta,
html body .stage .device .screen .oc-repeat-primary,
html body .stage .device .screen .last-order-cta .oc-repeat{
background:var(--dd-grad) !important;
color:#fff !important;
border:0 !important;
border-radius:16px !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-weight:700 !important;
box-shadow:0 12px 24px -12px rgba(224,69,127,.65) !important;
}
html body .stage .device .screen .promo-ban{
background:var(--dd-ink) !important;
background-image:none !important;
color:#fff !important;
border:0 !important;
border-radius:20px !important;
box-shadow:0 16px 32px -18px rgba(40,10,10,.6) !important;
}
html body .stage .device .screen .promo-ban-k{ color:#FFD27A !important; }
html body .stage .device .screen .promo-ban-t{ color:rgba(255,255,255,.85) !important; }
/* ---------- Низ экрана: баннер входа и корзина ---------- */
html body .stage .device .screen .guest-ban{
background:rgba(42,21,24,.94) !important;
background-image:none !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:18px !important;
box-shadow:0 16px 34px -18px rgba(40,10,10,.7) !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-weight:600 !important;
line-height:1.35 !important;
-webkit-backdrop-filter:blur(16px) !important;
backdrop-filter:blur(16px) !important;
}
/* корзина есть → баннер гостя поднимаем над ней (раньше перекрывал корзину) */
html body .stage .device .screen:has(.floatcart) .guest-ban,
html body .stage .device .screen.cold:has(.floatcart) .guest-ban,
html body .stage .device .screen.vitrina-mode:has(.floatcart) .guest-ban{
bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important;
}
html body .stage .device .screen .floatcart,
html body .stage .device .screen button.floatcart,
html body .stage .device .screen .floatcart.tone-hot,
html body .stage .device .screen .floatcart.tone-cold,
html body .stage .device .screen .floatcart.tone-vitrina{
background:var(--dd-ink) !important;
background-image:none !important;
color:#fff !important;
border:0 !important;
border-radius:20px !important;
height:58px !important;
box-shadow:0 20px 40px -18px rgba(40,10,10,.75) !important;
}
html body .stage .device .screen .fc-l{ font-family:'Rubik',system-ui,sans-serif !important; font-weight:700 !important; }
html body .stage .device .screen .fc-c{ background:rgba(255,255,255,.16) !important; color:#fff !important; border-radius:9px !important; }
html body .stage .device .screen .fc-r{
background:var(--dd-grad) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
border-radius:14px !important;
font-family:'Unbounded',sans-serif !important;
font-weight:700 !important;
}
/* tone-hot / tone-cold / tone-vitrina у корзины (перебиваем «last-wins» блок index) */
html body .stage .device .screen button.floatcart.floatcart.tone-hot,
html body .stage .device .screen button.floatcart.floatcart.tone-cold,
html body .stage .device .screen button.floatcart.floatcart.tone-vitrina,
html body .stage .device .screen .floatcart.floatcart.floatcart.tone-hot,
html body .stage .device .screen .floatcart.floatcart.floatcart.tone-cold,
html body .stage .device .screen .floatcart.floatcart.floatcart.tone-vitrina{
background:var(--dd-ink) !important;
background-image:none !important;
box-shadow:0 20px 40px -18px rgba(40,10,10,.75) !important;
}
html body .stage .device .screen .floatcart.floatcart.tone-hot .fc-r,
html body .stage .device .screen .floatcart.floatcart.tone-cold .fc-r,
html body .stage .device .screen .floatcart.floatcart.tone-vitrina .fc-r{
color:#fff !important;
-webkit-text-fill-color:#fff !important;
background:var(--dd-grad) !important;
}
/* чекаут (sheet-checkout.tone-*) — единый акцент */
html body .stage .device .screen .sheet.sheet.sheet-checkout .sh-t-pill,
html body .stage .device .screen .sheet.sheet.sheet-checkout .opt.on,
html body .stage .device .screen .sheet.sheet.sheet-checkout .seg .opt.on,
html body .stage .device .screen .sheet.sheet.sheet-checkout button.opt.on{
background:var(--dd-ink) !important;
background-image:none !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
border-color:var(--dd-ink) !important;
box-shadow:0 8px 18px -10px rgba(40,10,10,.55) !important;
}
html body .stage .device .screen .sheet.sheet.sheet-checkout .opt:not(.on){
background:#fff !important;
color:var(--dd-ink) !important;
-webkit-text-fill-color:var(--dd-ink) !important;
border-color:rgba(42,21,24,.09) !important;
}
html body .stage .device .screen .sheet.sheet.sheet-checkout .opt:not(.on) small{ color:var(--dd-mute) !important; -webkit-text-fill-color:var(--dd-mute) !important; }
html body .stage .device .screen .sheet.sheet.sheet-checkout .opt.on small{ color:rgba(255,255,255,.8) !important; -webkit-text-fill-color:rgba(255,255,255,.8) !important; }
html body .stage .device .screen .sheet.sheet.sheet-checkout .co-cart .qb,
html body .stage .device .screen .sheet.sheet.sheet-checkout .stepb{
background:var(--dd-soft) !important;
background-image:none !important;
color:var(--dd-ink) !important;
border:0 !important;
}
html body .stage .device .screen .sheet.sheet.sheet-checkout .sh-foot .btn-p,
html body .stage .device .screen .sheet.sheet.sheet-checkout .sh-foot .btn-p.btn-p-pill{
background:var(--dd-grad) !important;
background-image:var(--dd-grad) !important;
box-shadow:0 16px 30px -14px rgba(224,69,127,.65) !important;
}
html body .stage .device .screen .sheet.sheet.sheet-checkout .co-cart .c-p{ color:var(--dd-ink) !important; }
html body .stage .device .screen .sheet.sheet.sheet-checkout .co-cart .c-edit{ color:var(--dd-a1) !important; -webkit-text-fill-color:var(--dd-a1) !important; }
/* ---------- Шторка (лист напитка / корзина) ---------- */
html body .stage .device .screen .scrim{
background:rgba(42,21,24,.48) !important;
-webkit-backdrop-filter:blur(6px) !important;
backdrop-filter:blur(6px) !important;
}
html body .stage .device .screen .sheet{
background:#FFFBF8 !important;
background-image:none !important;
border-radius:28px !important;
box-shadow:0 -8px 60px -12px rgba(60,20,10,.4), 0 0 0 1px rgba(255,255,255,.7) !important;
left:8px !important;
right:8px !important;
}
html body .stage .device .screen .grab{ background:rgba(42,21,24,.14) !important; width:40px !important; height:5px !important; }
html body .stage .device .screen .sh-t{
color:var(--dd-ink) !important;
-webkit-text-fill-color:var(--dd-ink) !important;
font-family:'Unbounded',sans-serif !important;
font-weight:800 !important;
font-size:20px !important;
letter-spacing:-.01em !important;
background:none !important;
}
html body .stage .device .screen .sh-sub{ color:var(--dd-mute) !important; }
html body .stage .device .screen .sh-x{ background:var(--dd-soft) !important; color:var(--dd-ink) !important; }
html body .stage .device .screen .opt-l{ color:var(--dd-ink) !important; font-family:'Rubik',system-ui,sans-serif !important; }
html body .stage .device .screen .opt-l small{ color:var(--dd-mute) !important; }
html body .stage .device .screen .opt,
html body .stage .device .screen .pkitem,
html body .stage .device .screen .ptemp,
html body .stage .device .screen .syrb,
html body .stage .device .screen .stepb,
html body .stage .device .screen .syrml{
background:#fff !important;
border:1.5px solid rgba(42,21,24,.09) !important;
color:var(--dd-ink) !important;
box-shadow:0 2px 10px -6px rgba(60,20,10,.12) !important;
transition:background .18s ease, border-color .18s ease, transform .12s ease !important;
}
html body .stage .device .screen .opt{ border-radius:16px !important; }
html body .stage .device .screen .opt small{ color:var(--dd-mute) !important; }
html body .stage .device .screen .opt.on,
html body .stage .device .screen .pkitem.on{
background:var(--dd-grad-soft) !important;
border-color:var(--dd-a1) !important;
box-shadow:0 0 0 1px var(--dd-a1) !important;
}
html body .stage .device .screen .opt.on small{ color:var(--dd-a1) !important; }
html body .stage .device .screen .syrb{ border-radius:999px !important; }
html body .stage .device .screen .syrb.on,
html body .stage .device .screen .ptemp.on{
background:var(--dd-ink) !important;
color:#fff !important;
border-color:var(--dd-ink) !important;
box-shadow:0 8px 18px -10px rgba(40,10,10,.6) !important;
}
html body .stage .device .screen .syrb.on .bhouse{ background:var(--dd-a1) !important; color:#fff !important; }
html body .stage .device .screen .bhouse{ background:var(--dd-a1) !important; }
html body .stage .device .screen .stepb{ color:var(--dd-ink) !important; border-radius:12px !important; }
html body .stage .device .screen .stepv{ color:var(--dd-ink) !important; }
html body .stage .device .screen .btn-p{
background:var(--dd-grad) !important;
color:#fff !important;
border:0 !important;
border-radius:18px !important;
height:56px !important;
font-family:'Unbounded',sans-serif !important;
font-weight:700 !important;
font-size:15px !important;
box-shadow:0 16px 30px -14px rgba(224,69,127,.65) !important;
transition:transform .15s ease, box-shadow .2s ease !important;
}
html body .stage .device .screen.cold .btn-p{ box-shadow:0 16px 30px -14px rgba(124,79,214,.65) !important; }
html body .stage .device .screen .btn-p:active{ transform:scale(.985) !important; }
html body .stage .device .screen .btn-p small{ color:rgba(255,255,255,.85) !important; }
html body .stage .device .screen .btn-g{
background:var(--dd-soft) !important;
color:var(--dd-ink) !important;
border-radius:16px !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-weight:700 !important;
}
html body .stage .device .screen .c-tile{ background:var(--dd-soft) !important; color:var(--dd-a1) !important; border-radius:14px !important; }
html body .stage .device .screen .c-n{ color:var(--dd-ink) !important; }
html body .stage .device .screen .c-s{ color:var(--dd-mute) !important; }
html body .stage .device .screen .c-p{ color:var(--dd-ink) !important; }
html body .stage .device .screen .c-edit{ color:var(--dd-a1) !important; border-bottom-color:rgba(224,69,127,.4) !important; }
html body .stage .device .screen .crow{ border-bottom:1px solid var(--dd-line) !important; }
html body .stage .device .screen .qb{ background:var(--dd-soft) !important; border:0 !important; color:var(--dd-ink) !important; border-radius:10px !important; }
html body .stage .device .screen .qv{ color:var(--dd-ink) !important; }
html body .stage .device .screen .frow{ color:var(--dd-mute) !important; }
html body .stage .device .screen .frow b{ color:var(--dd-ink) !important; }
html body .stage .device .screen .frow.tot{ border-top:1px solid var(--dd-line) !important; }
html body .stage .device .screen .frow.tot b{ color:var(--dd-ink) !important; }
html body .stage .device .screen .tgl{
background:#fff !important;
border:1px solid var(--dd-line) !important;
border-radius:18px !important;
box-shadow:var(--dd-shadow) !important;
}
html body .stage .device .screen .tgl-t{ color:var(--dd-ink) !important; }
html body .stage .device .screen .tgl-s{ color:var(--dd-mute) !important; }
html body .stage .device .screen .sw{ background:#E6DDD9 !important; }
html body .stage .device .screen .sw.on{ background:var(--dd-a1) !important; }
html body .stage .device .screen .addr{
background:#fff !important;
border:1.5px solid rgba(42,21,24,.09) !important;
border-radius:16px !important;
color:var(--dd-ink) !important;
}
html body .stage .device .screen .addr:focus{ border-color:var(--dd-a1) !important; box-shadow:0 0 0 3px var(--dd-grad-soft) !important; }
/* кнопка «Войти» в баннере гостя (inline-стиль → перебиваем по атрибуту) */
html body .stage .device .screen .guest-ban button,
html body .stage .device .screen .guest-ban button[style]{
background:#fff !important;
background-image:none !important;
color:var(--dd-ink) !important;
border-radius:12px !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-weight:700 !important;
padding:9px 14px !important;
box-shadow:0 6px 14px -8px rgba(0,0,0,.4) !important;
}
html body .stage .device .screen .place-chip-hrs,
html body .stage .device .screen .place-chip .place-chip-hrs{
background:none !important;
background-image:none !important;
padding:0 !important;
border:0 !important;
box-shadow:none !important;
-webkit-text-fill-color:#FFD27A !important;
}
/* ---------- Баннеры «установить» / «уведомления» ---------- */
html body .stage .device .screen .nbanner{
background:rgba(255,251,248,.96) !important;
background-image:none !important;
border:1px solid rgba(255,255,255,.9) !important;
border-radius:24px !important;
box-shadow:0 24px 50px -22px rgba(60,20,10,.5) !important;
-webkit-backdrop-filter:blur(20px) !important;
backdrop-filter:blur(20px) !important;
}
html body .stage .device .screen .nb-ic{
background:var(--dd-grad) !important;
color:#fff !important;
border-radius:14px !important;
box-shadow:0 10px 20px -10px rgba(224,69,127,.7) !important;
}
html body .stage .device .screen .nb-t{ color:var(--dd-ink) !important; font-family:'Rubik',system-ui,sans-serif !important; font-weight:700 !important; }
html body .stage .device .screen .nb-s{ color:var(--dd-mute) !important; }
html body .stage .device .screen .nb-no{
background:var(--dd-soft) !important;
color:var(--dd-ink) !important;
border-radius:14px !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-weight:700 !important;
}
html body .stage .device .screen .nb-yes{
background:var(--dd-ink) !important;
background-image:none !important;
color:#fff !important;
border-radius:14px !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-weight:700 !important;
box-shadow:0 10px 22px -12px rgba(40,10,10,.6) !important;
}
/* ---------- Шторка кастомизации напитка (sheet-cust) ---------- */
html body .stage .device .screen .sheet.sheet-cust .sh-h-cust,
html body .stage .device .screen .sheet.sheet-checkout .sh-h,
html body .stage .device .screen .sheet.sheet-cust .sh-foot{
background:#FFFBF8 !important;
background-image:none !important;
border-color:var(--dd-line) !important;
box-shadow:none !important;
}
html body .stage .device .screen .sheet .cust-head{
background:transparent !important;
background-image:none !important;
box-shadow:none !important;
border:0 !important;
padding:6px 4px !important;
}
html body .stage .device .screen .sheet .cust-title,
html body .stage .device .screen .sheet .sh-t.cust-title{
color:var(--dd-ink) !important;
-webkit-text-fill-color:var(--dd-ink) !important;
background:none !important;
font-size:22px !important;
}
html body .stage .device .screen .sheet .cust-lead,
html body .stage .device .screen .sheet .sh-sub.cust-lead{
color:var(--dd-mute) !important;
-webkit-text-fill-color:var(--dd-mute) !important;
background:none !important;
opacity:1 !important;
}
html body .stage .device .screen .sheet.sheet-cust .cro-block{
background:#fff !important;
border:1px solid var(--dd-line) !important;
border-radius:20px !important;
box-shadow:var(--dd-shadow) !important;
}
html body .stage .device .screen .sheet.sheet-cust .cro-row:active{ background:var(--dd-soft) !important; }
html body .stage .device .screen .sheet.sheet-cust .cro-row.on{ background:var(--dd-grad-soft) !important; }
html body .stage .device .screen .sheet.sheet-cust .cro-k{
color:var(--dd-ink) !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-weight:700 !important;
}
html body .stage .device .screen .sheet.sheet-cust .cro-k small{
background:var(--dd-soft) !important;
background-image:none !important;
color:var(--dd-ink2) !important;
-webkit-text-fill-color:var(--dd-ink2) !important;
font-weight:700 !important;
}
html body .stage .device .screen .sheet.sheet-cust .cro-v{ color:var(--dd-mute) !important; }
html body .stage .device .screen .sheet.sheet-cust .cro-row.on .cro-v{ color:var(--dd-ink) !important; }
html body .stage .device .screen .sheet.sheet-cust .cro-ch{ color:rgba(42,21,24,.3) !important; }
html body .stage .device .screen .sheet.sheet-cust .cro-row.on .cro-ch{ color:var(--dd-a1) !important; }
html body .stage .device .screen .sheet.sheet-cust .cro-panel{
background:#FFFBF8 !important;
border-top:1px solid var(--dd-line) !important;
}
html body .stage .device .screen .sheet.sheet-cust .cro-block .cro-inline-step + .cro-inline-step{ border-top-color:var(--dd-line) !important; }
html body .stage .device .screen .sheet.sheet-cust .cro-seg .opt{ border-radius:14px !important; }
html body .stage .device .screen .sheet.sheet-cust .cro-seg .opt.on{ color:var(--dd-ink) !important; }
html body .stage .device .screen .sheet.sheet-cust .cro-seg .opt.on small{ color:var(--dd-a1) !important; }
html body .stage .device .screen .sheet.sheet-cust .addrow{
border-color:rgba(224,69,127,.35) !important;
color:var(--dd-a1) !important;
background:var(--dd-grad-soft) !important;
}
html body .stage .device .screen .cro-more-btn{
border-color:rgba(42,21,24,.14) !important;
background:#fff !important;
color:var(--dd-ink) !important;
}
html body .stage .device .screen .cro-save-preset{ color:var(--dd-a1) !important; }
html body .stage .device .screen .sheet.sheet-cust .sh-foot .btn-p{ border-radius:18px !important; }
/* ---------- Экран входа: листья + тёмная виньетка снизу, белый логотип ---------- */
html body .stage .device .screen .authwrap,
html.auth-pin-lock body .stage .device .screen .authwrap,
html.kb-auth body .stage .device .screen .authwrap,
html.kb-open.kb-auth body .stage .device .screen .authwrap,
html.auth-phone-kb body .stage .device .screen .authwrap{
background-color:#F09A2A !important;
background-image:
linear-gradient(180deg, rgba(60,18,10,.08) 0%, rgba(60,18,10,0) 22%, rgba(60,18,10,.30) 58%, rgba(60,18,10,.62) 100%),
url('./assets/bg-leaves.jpg') !important;
background-size:cover, cover !important;
background-position:center top, center top !important;
background-repeat:no-repeat !important;
}
html body .stage .device .screen .authwrap .auth-wordmark,
html body .stage .device .screen .authwrap .auth-phone-clean .auth-wordmark{
filter:brightness(0) invert(1) drop-shadow(0 8px 22px rgba(60,18,10,.45)) !important;
-webkit-filter:brightness(0) invert(1) drop-shadow(0 8px 22px rgba(60,18,10,.45)) !important;
animation:none !important;
transform:none !important;
}
html body .stage .device .screen .authwrap .auth-hero-pill{
background:rgba(42,21,24,.46) !important;
background-image:none !important;
border:1px solid rgba(255,255,255,.22) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
box-shadow:none !important;
-webkit-backdrop-filter:blur(16px) !important;
backdrop-filter:blur(16px) !important;
}
html body .stage .device .screen .authwrap .auth-hero-pill b{
background:none !important;
color:#FFD27A !important;
-webkit-text-fill-color:#FFD27A !important;
}
html body .stage .device .screen .authwrap .auth-l,
html body .stage .device .screen .authwrap .auth-h{
color:#fff !important;
-webkit-text-fill-color:#fff !important;
text-shadow:0 1px 2px rgba(40,10,8,.45) !important;
}
html body .stage .device .screen .authwrap .auth-tag{ color:rgba(255,250,244,.88) !important; text-shadow:0 1px 2px rgba(40,10,8,.4) !important; }
html body .stage .device .screen .authwrap .phonein{
background:#fff !important;
border:1.5px solid rgba(255,255,255,.9) !important;
border-radius:18px !important;
box-shadow:0 14px 30px -18px rgba(40,10,8,.6) !important;
}
html body .stage .device .screen .authwrap .phonein input,
html body .stage .device .screen .authwrap .phonein span,
html body .stage .device .screen .authwrap .phonein b{ color:var(--dd-ink) !important; }
html body .stage .device .screen .authwrap .auth-hint{
background:rgba(255,251,248,.94) !important;
background-image:none !important;
border:1px solid rgba(255,255,255,.9) !important;
border-radius:18px !important;
color:var(--dd-ink2) !important;
box-shadow:0 14px 30px -20px rgba(40,10,8,.5) !important;
}
html body .stage .device .screen .authwrap .auth-hint b{ color:var(--dd-a1) !important; -webkit-text-fill-color:var(--dd-a1) !important; background:none !important; }
html body .stage .device .screen .authwrap .auth-skip,
html body .stage .device .screen .authwrap .auth-edit{
color:#fff !important;
-webkit-text-fill-color:#fff !important;
text-shadow:0 1px 2px rgba(40,10,8,.45) !important;
background:none !important;
}
html body .stage .device .screen .authwrap .auth-login-btn,
html body .stage .device .screen .authwrap .btn-p{
background:var(--dd-grad) !important;
color:#fff !important;
border:0 !important;
border-radius:18px !important;
box-shadow:0 18px 34px -14px rgba(224,69,127,.7) !important;
-webkit-text-fill-color:#fff !important;
font-family:'Unbounded',sans-serif !important;
font-weight:700 !important;
}
html body .stage .device .screen .authwrap .auth-login-btn *,
html body .stage .device .screen .authwrap .btn-p *{
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
html body .stage .device .screen .authwrap .auth-note{
background:rgba(255,251,248,.94) !important;
border:1px solid rgba(255,255,255,.9) !important;
border-radius:16px !important;
color:var(--dd-ink2) !important;
}
/* ---------- «Моя карта»: профиль, заказы, уведомления ---------- */
html body .stage .device .screen .pf-n{
font-family:'Unbounded',sans-serif !important;
font-weight:800 !important;
color:var(--dd-ink) !important;
-webkit-text-fill-color:var(--dd-ink) !important;
background:none !important;
letter-spacing:-.01em !important;
}
html body .stage .device .screen .pf-p{ color:var(--dd-mute) !important; }
html body .stage .device .screen .pf-edit{ background:var(--dd-soft) !important; color:var(--dd-a1) !important; border-radius:10px !important; }
html body .stage .device .screen .ordgroup,
html body .stage .device .screen button.ordgroup{
background:var(--dd-card) !important;
background-image:none !important;
border:1px solid var(--dd-line) !important;
border-radius:22px !important;
box-shadow:var(--dd-shadow) !important;
color:var(--dd-ink) !important;
}
html body .stage .device .screen .og-ic{ background:var(--dd-soft) !important; color:var(--dd-a1) !important; border-radius:14px !important; }
html body .stage .device .screen .og-t{ color:var(--dd-ink) !important; -webkit-text-fill-color:var(--dd-ink) !important; font-family:'Unbounded',sans-serif !important; font-weight:700 !important; font-size:14px !important; }
html body .stage .device .screen .og-s{ color:var(--dd-mute) !important; -webkit-text-fill-color:var(--dd-mute) !important; }
html body .stage .device .screen .og-cnt{ background:var(--dd-grad) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; box-shadow:0 6px 12px -6px rgba(224,69,127,.6) !important; }
html body .stage .device .screen .ordgroup svg{ color:var(--dd-mute) !important; }
html body .stage .device .screen .ordcard{
background:var(--dd-card) !important;
background-image:none !important;
border:1px solid var(--dd-line) !important;
border-radius:20px !important;
box-shadow:var(--dd-shadow) !important;
}
html body .stage .device .screen .notif-cta{
background:var(--dd-card) !important;
background-image:none !important;
border:1px solid var(--dd-line) !important;
border-radius:22px !important;
box-shadow:var(--dd-shadow) !important;
}
html body .stage .device .screen .nc-ic{ background:var(--dd-ink) !important; color:#fff !important; border-radius:14px !important; box-shadow:none !important; }
html body .stage .device .screen .nc-t{ color:var(--dd-ink) !important; -webkit-text-fill-color:var(--dd-ink) !important; font-size:14px !important; }
html body .stage .device .screen .nc-s{ color:var(--dd-mute) !important; }
html body .stage .device .screen .nc-go{
background:var(--dd-ink) !important;
background-image:none !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
border:0 !important;
border-radius:14px !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-weight:700 !important;
box-shadow:0 10px 22px -12px rgba(40,10,10,.6) !important;
}
html body .stage .device .screen .contacts{ color:var(--dd-mute) !important; }
html body .stage .device .screen .contacts .tel,
html body .stage .device .screen .contacts a{ color:var(--dd-ink) !important; -webkit-text-fill-color:var(--dd-ink) !important; text-decoration-color:rgba(42,21,24,.25) !important; }
/* ---------- «Моя карта»: листья на весь экран, карта в пропорции банковской ---------- */
html body .stage .device .screen.screen.screen.screen.screen.profile,
html body .stage .device .screen.screen.screen.screen.screen.profile.cold{
background-color:#F09A2A !important;
background-image:
linear-gradient(180deg, rgba(60,18,10,0) 0%, rgba(60,18,10,0) 30%, rgba(60,18,10,.18) 65%, rgba(60,18,10,.42) 100%),
url('./assets/bg-leaves.jpg') !important;
background-size:cover, cover !important;
background-position:center top, center top !important;
background-repeat:no-repeat !important;
}
/* шапка на профиле сливается с фоном: без плашки, тени и скругления */
html body .stage .device .screen.profile .dar-season-pin,
html body .stage .device .screen.profile .dar-local-pin{
border-radius:0 !important;
box-shadow:none !important;
margin-bottom:0 !important;
}
html body .stage .device .screen.profile .dar-season-pin::before,
html body .stage .device .screen.profile .dar-local-pin::before{
background-color:transparent !important;
background-image:linear-gradient(180deg, rgba(60,18,10,.14) 0%, rgba(60,18,10,0) 100%) !important;
}
/* текст профиля на листьях — белый с тенью */
html body .stage .device .screen.profile .pf-n{
color:#fff !important;
-webkit-text-fill-color:#fff !important;
text-shadow:0 1px 2px rgba(40,10,8,.5), 0 4px 14px rgba(40,10,8,.25) !important;
}
html body .stage .device .screen.profile .pf-p{
color:rgba(255,250,244,.92) !important;
text-shadow:0 1px 2px rgba(40,10,8,.45) !important;
}
html body .stage .device .screen.profile .pf-edit{
background:rgba(255,255,255,.9) !important;
color:var(--dd-a1) !important;
}
html body .stage .device .screen.profile .notif-on{
color:#fff !important;
-webkit-text-fill-color:#fff !important;
text-shadow:0 1px 2px rgba(40,10,8,.5) !important;
}
html body .stage .device .screen.profile .notif-on svg{ color:#D6F05A !important; stroke:#D6F05A !important; }
html body .stage .device .screen.profile .contacts{
color:rgba(255,250,244,.9) !important;
text-shadow:0 1px 2px rgba(40,10,8,.45) !important;
}
html body .stage .device .screen.profile .contacts .tel,
html body .stage .device .screen.profile .contacts a{
color:#fff !important;
-webkit-text-fill-color:#fff !important;
text-decoration-color:rgba(255,255,255,.5) !important;
}
html body .stage .device .screen.profile .empty{ color:rgba(255,250,244,.9) !important; text-shadow:0 1px 2px rgba(40,10,8,.4) !important; }
html body .stage .device .screen.profile .again-cta,
html body .stage .device .screen.profile .again-cta-prof{
background:rgba(42,21,24,.6) !important;
background-image:none !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.2) !important;
-webkit-backdrop-filter:blur(14px) !important;
backdrop-filter:blur(14px) !important;
box-shadow:0 12px 26px -16px rgba(0,0,0,.6) !important;
}
html body .stage .device .screen.profile .again-cta .again-k{
background:var(--dd-grad) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
html body .stage .device .screen.profile .again-cta .again-t,
html body .stage .device .screen.profile .again-cta .again-s{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* клубная карта: ширина экрана, пропорция банковской карты 1.586:1 */
html body .stage .device .screen .clubcard.clubcard.clubcard.clubcard,
html body .stage .device .screen.profile .clubcard.clubcard.clubcard.clubcard,
html body .stage .device .screen .clubcard.clubcard.clubcard.clubcard.has-gift,
html body .stage .device .screen .clubcard.clubcard.clubcard.clubcard.has-friend,
html body .stage .device .screen .clubcard.clubcard.clubcard.clubcard.has-gift.has-friend,
html.dc-android body .stage .device .screen .clubcard.clubcard.clubcard.clubcard,
html.dc-honor body .stage .device .screen .clubcard.clubcard.clubcard.clubcard{
--cc-pill:46px;
width:calc(100% - 32px) !important;
max-width:420px !important;
aspect-ratio:1.586 / 1 !important;
height:auto !important;
border-radius:22px !important;
box-shadow:
0 1px 0 rgba(255,255,255,.3) inset,
0 26px 50px -22px rgba(12,50,120,.7),
0 10px 24px -14px rgba(0,0,0,.35) !important;
}
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-mascot,
html body .stage .device .screen .clubcard.clubcard.clubcard img.cc-mascot,
html body .stage .device .screen .clubcard.clubcard.clubcard.has-gift img.cc-mascot{
width:60% !important;
max-width:60% !important;
top:0 !important;
height:calc(100% - var(--cc-pill) + 4px) !important;
max-height:calc(100% - var(--cc-pill) + 4px) !important;
object-position:left bottom !important;
}
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-qrwrap{ top:9% !important; right:5.5% !important; }
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-qr{ width:78px !important; height:78px !important; }
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-track{
top:calc((100% - var(--cc-pill)) * 0.74) !important;
left:33% !important; /* дорожка штампов начинается справа от маскота — первые точки не прячутся за ним */
right:6% !important;
}
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-topbar{ bottom:8px !important; left:10px !important; right:10px !important; }
/* ============================================================
Итерация 2: компактная шапка · чипы разделов · иконка настройки · подписи мл
============================================================ */
/* 1. Компактная шапка: слоган в одну строку, меньше воздуха */
html body .stage .device .screen .dar-season-pin .app-tagline-t2,
html body .stage .device .screen .dar-season-pin .app-tagline-t3,
html body .stage .device .screen .app-head .app-tagline-t2,
html body .stage .device .screen .app-head .app-tagline-t3{
display:none !important;
}
html body .stage .device .screen .app-tagline-t1,
html body .stage .device .screen .dar-season-pin .app-tagline-t1{
font-size:15px !important;
line-height:1.15 !important;
}
html body .stage .device .screen:not(.profile) .dar-season-pin,
html body .stage .device .screen:not(.profile) .dar-local-pin{
padding-top:calc(env(safe-area-inset-top,0px) + 8px) !important;
padding-bottom:10px !important;
}
html body .stage .device .screen .app-head.mtitle.mtitle-row,
html body .stage .device .screen .dar-season-pin .app-head.mtitle.mtitle-row,
html body .stage .device .screen .view .app-head.mtitle.mtitle-row{
min-height:44px !important;
padding:2px 16px 2px !important;
margin:0 0 4px !important;
}
html body .stage .device .screen .mycardbtn,
html body .stage .device .screen .dar-season-pin .mycardbtn,
html body .stage .device .screen .app-head .mycardbtn{
height:40px !important;
min-height:40px !important;
max-height:40px !important;
}
html body .stage .device .screen .place-chip,
html body .stage .device .screen .dar-season-pin .place-chip{
margin:4px 16px 6px !important;
height:36px !important;
min-height:36px !important;
padding:7px 14px !important;
font-size:12.5px !important;
}
html body .stage .device .screen .modes.modes3,
html body .stage .device .screen .dar-season-pin .modes.modes3{
margin:4px 14px 0 !important;
height:42px !important;
min-height:42px !important;
}
html body .stage .device .screen .modes.modes3 .modeb{ height:36px !important; }
/* 2. Чипы разделов — возвращаем (сезонный CSS их прятал), липкая лента под шапкой */
html body .stage .device .screen .chipbar,
html body .stage .device .screen:not(.profile) .chipbar,
html body .stage .device .screen .chipbar .chips,
html body .stage .device .screen:not(.profile) .chips{
display:flex !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
position:static !important;
left:auto !important;
width:auto !important;
overflow:visible !important;
border:0 !important;
}
/* --dd-pin-h = offsetHeight шапки (.dar-season-pin): в нём уже и safe-area (padding-top шапки),
и полоска живого заказа (.tk-bar внутри шапки). Прибавлять env() сверху нельзя — на iPhone
в standalone это +47…59px, и лента висела посреди списка. */
html body .stage .device .screen .chipbar,
html body .stage .device .screen:not(.profile) .chipbar{
position:sticky !important;
top:var(--dd-pin-h, 135px) !important;
z-index:39 !important;
margin:0 !important;
padding:0 !important;
background:rgba(255,246,240,.94) !important;
-webkit-backdrop-filter:blur(14px) saturate(1.2) !important;
backdrop-filter:blur(14px) saturate(1.2) !important;
box-shadow:0 8px 16px -14px rgba(90,35,25,.35) !important;
}
html body .stage .device .screen.cold .chipbar{
background:rgba(243,244,253,.94) !important;
}
html body .stage .device .screen .view:has(.tk-bar) .chipbar{
top:var(--dd-pin-h, 135px) !important;
}
html body .stage .device .screen .chipbar .chips,
html body .stage .device .screen:not(.profile) .chips{
gap:6px !important;
padding:8px 16px 8px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scrollbar-width:none !important;
-webkit-overflow-scrolling:touch !important;
scroll-snap-type:x proximity !important;
}
html body .stage .device .screen .chips::-webkit-scrollbar{ display:none !important; }
html body .stage .device .screen .chips .chip,
html body .stage .device .screen .chipbar .chip:not(.on),
html body .stage .device .screen:not(.cold):not(.vitrina-mode) .chipbar .chip:not(.on),
html body .stage .device .screen:not(.cold):not(.vitrina-mode) .chips .chip:not(.on){
flex:none !important;
scroll-snap-align:start !important;
border-radius:999px !important;
padding:8px 13px !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-size:12.5px !important;
font-weight:600 !important;
letter-spacing:0 !important;
text-transform:none !important;
background:#fff !important;
background-image:none !important;
border:1px solid var(--dd-line) !important;
color:var(--dd-ink) !important;
-webkit-text-fill-color:var(--dd-ink) !important;
text-shadow:none !important;
box-shadow:0 4px 12px -10px rgba(90,35,25,.35) !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
transition:background .36s cubic-bezier(.16,1,.3,1), color .36s cubic-bezier(.16,1,.3,1), border-color .36s cubic-bezier(.16,1,.3,1), box-shadow .36s cubic-bezier(.16,1,.3,1), transform .18s ease !important;
}
html body .stage .device .screen .chips .chip.on,
html body .stage .device .screen .chipbar .chip.on,
html body .stage .device .screen:not(.cold):not(.vitrina-mode) .chip.on,
html body .stage .device .screen:not(.cold):not(.vitrina-mode) .chips .chip.on{
background:var(--dd-ink) !important;
background-image:none !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
border-color:var(--dd-ink) !important;
box-shadow:0 8px 18px -10px rgba(40,10,10,.6) !important;
}
/* jump() уже вычитает шапку + ленту чипов. 58px сверху у каждой секции
поднимали низ меню и оставляли дыру после последнего напитка. */
html body .stage .device .screen .menusec{
padding-top:14px !important;
padding-bottom:0 !important;
scroll-margin-top:calc(var(--dd-pin-h, 135px) + 48px);
}
html body .stage .device .screen .chipbar + .menusec{ padding-top:14px !important; }
html body .stage .device .screen .menusec:last-of-type{ padding-bottom:0 !important; }
/* Нижней панели Меню/Профиль давно нет — не оставляем под неё 110–130px.
Место только если снизу реально что-то лежит: корзина, баннер входа, install. */
html body .stage .device .screen .view{
padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important;
}
html body .stage .device .screen:has(.floatcart) .view{
padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important;
}
html body .stage .device .screen:has(.guest-ban) .view{
padding-bottom:calc(88px + env(safe-area-inset-bottom,0px)) !important;
}
html body .stage .device .screen:has(.floatcart):has(.guest-ban) .view{
padding-bottom:calc(150px + env(safe-area-inset-bottom,0px)) !important;
}
html body .stage .device .screen:has(.nbanner) .view{
padding-bottom:calc(150px + env(safe-area-inset-bottom,0px)) !important;
}
html body .stage .device .screen .view:has(.profile-page){
padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important;
}
/* 3. «+» открывает настройку напитка, а не добавляет — рисуем иконку ползунков */
html body .stage .device .screen .item .iright .cust:not(.cust-wide),
html body .stage .device .screen .item.single .iright .cust:not(.cust-wide),
html body .stage .device .screen:not(.vitrina-mode):not(.cold) .item.single .iright .cust:not(.cust-wide){
font-size:0 !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
position:relative !important;
overflow:visible !important;
}
html body .stage .device .screen .item .iright .cust:not(.cust-wide)::after,
html body .stage .device .screen .item.single .iright .cust:not(.cust-wide)::after,
html body .stage .device .screen:not(.vitrina-mode):not(.cold) .item.single .iright .cust:not(.cust-wide)::after{
content:"" !important;
display:block !important;
position:absolute !important;
left:50% !important;
top:50% !important;
width:20px !important;
height:20px !important;
margin:-10px 0 0 -10px !important;
padding:0 !important;
border:0 !important;
opacity:1 !important;
box-shadow:none !important;
pointer-events:none !important;
animation:none !important;
-webkit-mask:none !important;
mask:none !important;
background:url("data:image/svg+xml;utf8,") center / 20px 20px no-repeat !important;
}
/* 4. Подписи объёма крупнее, чипы чуть шире */
html body .stage .device .screen .item .iright{ max-width:64% !important; }
html body .stage .device .screen .item .iright .sz,
html body .stage .device .screen .item.single .iright .sz,
html body .stage .device .screen.cold .item.single .iright .sz{
width:53px !important;
min-width:53px !important;
height:44px !important;
}
html body .stage .device .screen .item .iright .sz .szv{
font-size:10.5px !important;
max-width:50px !important;
}
html body .stage .device .screen .item .iright .sz b{ font-size:13px !important; max-width:50px !important; }
/* ---------- Пусто / мелочи ---------- */
html body .stage .device .screen .empty{ color:var(--dd-mute) !important; }
html body .stage .device .screen .view{ scrollbar-width:none !important; }
/* ============================================================
Вариант Б: тёмная премиальная шапка меню.
Листья — только полупрозрачная текстура; глубокий винно-шоколадный
градиент (холодное — сливово-индиго). Один стиль стекла: светлое.
Статус-бар: theme-color = цвет шапки, плита исчезает.
============================================================ */
html body .stage .device .screen:not(.profile) .dar-season-pin,
html body .stage .device .screen:not(.profile) .dar-local-pin{
background:#2A1416 !important;
border-radius:0 0 26px 26px !important;
box-shadow:0 22px 40px -24px rgba(20,6,8,.75) !important;
padding-top:calc(var(--dar-safe-top, env(safe-area-inset-top, 0px)) + 10px) !important;
padding-bottom:12px !important;
}
html body .stage .device .screen:not(.profile) .dar-season-pin::before,
html body .stage .device .screen:not(.profile) .dar-local-pin::before{
background-color:#2A1416 !important;
background-image:
linear-gradient(180deg, rgba(42,20,22,.72) 0%, rgba(58,24,32,.82) 55%, rgba(38,16,20,.94) 100%),
url('./assets/bg-leaves.jpg') !important;
background-size:cover, cover !important;
background-position:center top, center 30% !important;
background-repeat:no-repeat !important;
opacity:1 !important;
}
html body .stage .device .screen.cold:not(.profile) .dar-season-pin,
html body .stage .device .screen.cold:not(.profile) .dar-local-pin{ background:#1E1A33 !important; }
html body .stage .device .screen.cold:not(.profile) .dar-season-pin::before,
html body .stage .device .screen.cold:not(.profile) .dar-local-pin::before{
background-color:#1E1A33 !important;
background-image:
linear-gradient(180deg, rgba(30,26,52,.80) 0%, rgba(44,34,78,.88) 55%, rgba(26,22,46,.96) 100%),
url('./assets/bg-leaves.jpg') !important;
}
/* «Моя карта» — единственный белый акцент в шапке */
html body .stage .device .screen:not(.profile) .dar-season-pin .mycardbtn,
html body .stage .device .screen:not(.profile) .app-head .mycardbtn{
background:#FFFFFF !important;
border:0 !important;
box-shadow:0 10px 24px -14px rgba(0,0,0,.7) !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
/* слоган — мягче, не спорит с кнопкой */
html body .stage .device .screen:not(.profile) .app-tagline-t1,
html body .stage .device .screen:not(.profile) .dar-season-pin .app-tagline-t1{
font-size:14px !important;
font-weight:600 !important;
color:rgba(255,248,242,.96) !important;
-webkit-text-fill-color:rgba(255,248,242,.96) !important;
text-shadow:none !important;
}
/* адрес — строка текста вместо капсулы */
html body .stage .device .screen:not(.profile) .place-chip,
html body .stage .device .screen:not(.profile) .dar-season-pin .place-chip{
background:none !important;
background-image:none !important;
border:0 !important;
box-shadow:none !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
height:auto !important;
min-height:0 !important;
padding:0 18px !important;
margin:2px 0 10px !important;
justify-content:center !important;
font-size:12px !important;
font-weight:500 !important;
letter-spacing:.01em !important;
color:rgba(255,240,232,.7) !important;
}
html body .stage .device .screen:not(.profile) .place-chip-ic{ display:none !important; }
html body .stage .device .screen:not(.profile) .place-chip-addr{
color:rgba(255,240,232,.82) !important;
-webkit-text-fill-color:rgba(255,240,232,.82) !important;
font-weight:600 !important;
}
html body .stage .device .screen:not(.profile) .place-chip-dot{
color:rgba(255,240,232,.35) !important;
-webkit-text-fill-color:rgba(255,240,232,.35) !important;
}
html body .stage .device .screen:not(.profile) .place-chip-hrs,
html body .stage .device .screen:not(.profile) .place-chip .place-chip-hrs{
color:#FFC978 !important;
-webkit-text-fill-color:#FFC978 !important;
font-weight:600 !important;
background:none !important;
}
/* сегмент режимов — светлое стекло, белый ползунок */
html body .stage .device .screen:not(.profile) .modes.modes3,
html body .stage .device .screen:not(.profile) .dar-season-pin .modes.modes3{
background:rgba(255,255,255,.10) !important;
border:1px solid rgba(255,255,255,.14) !important;
-webkit-backdrop-filter:blur(10px) !important;
backdrop-filter:blur(10px) !important;
margin:0 14px 0 !important;
height:42px !important;
min-height:42px !important;
}
html body .stage .device .screen:not(.profile) .modes.modes3 .modeb:not(.on),
html body .stage .device .screen:not(.profile) .modes.modes3 .modeb:not(.on) span,
html body .stage .device .screen:not(.profile) .modes.modes3 .mode-vitrina:not(.on) span{
color:rgba(255,245,238,.78) !important;
-webkit-text-fill-color:rgba(255,245,238,.78) !important;
}
html body .stage .device .screen:not(.profile) .modes .mthumb,
html body .stage .device .screen:not(.profile) .modes.modes3 .mthumb.m3{
box-shadow:0 6px 16px -8px rgba(0,0,0,.7) !important;
}
/* лента разделов сразу под тёмной шапкой — чуть больше воздуха сверху */
html body .stage .device .screen .chipbar .chips,
html body .stage .device .screen:not(.profile) .chips{ padding-top:10px !important; }
/* статус-бар теперь тёмный (theme-color #2A1416): на листьях входа и профиля — тёмная виньетка сверху, чтобы не было плиты */
html body .stage .device .screen .authwrap,
html.auth-pin-lock body .stage .device .screen .authwrap,
html.kb-auth body .stage .device .screen .authwrap,
html.kb-open.kb-auth body .stage .device .screen .authwrap,
html.auth-phone-kb body .stage .device .screen .authwrap{
background-image:
linear-gradient(180deg, rgba(42,20,22,.94) 0px, rgba(42,20,22,.62) calc(env(safe-area-inset-top,0px) + 44px), rgba(42,20,22,0) calc(env(safe-area-inset-top,0px) + 190px)),
linear-gradient(180deg, rgba(60,18,10,.08) 0%, rgba(60,18,10,0) 22%, rgba(60,18,10,.30) 58%, rgba(60,18,10,.62) 100%),
url('./assets/bg-leaves.jpg') !important;
background-size:100% 100%, cover, cover !important;
background-position:center top, center top, center top !important;
background-repeat:no-repeat !important;
}
html body .stage .device .screen.screen.screen.screen.screen.profile,
html body .stage .device .screen.screen.screen.screen.screen.profile.cold{
background-image:
linear-gradient(180deg, rgba(42,20,22,.94) 0px, rgba(42,20,22,.62) calc(env(safe-area-inset-top,0px) + 44px), rgba(42,20,22,0) calc(env(safe-area-inset-top,0px) + 190px)),
linear-gradient(180deg, rgba(60,18,10,0) 0%, rgba(60,18,10,0) 30%, rgba(60,18,10,.18) 65%, rgba(60,18,10,.42) 100%),
url('./assets/bg-leaves.jpg') !important;
background-size:100% 100%, cover, cover !important;
background-position:center top, center top, center top !important;
background-repeat:no-repeat !important;
}
/* ============================================================
Шапка Б.2: без листьев. Тёмный эспрессо-градиент, два мягких
световых пятна (янтарь / ягода), мелкое зерно плёнки, стеклянная
кромка снизу. Холодное — индиго с сине-фиолетовыми пятнами.
============================================================ */
html body .stage .device .screen:not(.profile) .dar-season-pin::before,
html body .stage .device .screen:not(.profile) .dar-local-pin::before{
top:0 !important;
bottom:0 !important;
height:auto !important;
min-height:100% !important;
background-color:#2A1416 !important;
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(70% 110% at 88% 0%, rgba(255,150,70,.55) 0%, rgba(255,150,70,0) 64%),
radial-gradient(55% 90% at 6% 104%, rgba(224,69,127,.50) 0%, rgba(224,69,127,0) 62%),
radial-gradient(40% 60% at 55% 120%, rgba(255,107,87,.22) 0%, rgba(255,107,87,0) 60%),
linear-gradient(160deg, #2E1518 0%, #3C1B25 52%, #22101A 100%) !important;
background-size:160px 160px, auto, auto, auto, auto !important;
background-position:0 0, center, center, center, center !important;
background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
box-shadow:inset 0 -1px 0 rgba(255,255,255,.10) !important;
}
html body .stage .device .screen.vitrina-mode:not(.profile) .dar-season-pin::before,
html body .stage .device .screen.vitrina-mode:not(.profile) .dar-local-pin::before{
background-color:#2A1416 !important;
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(160deg, #2A1416 0%, #3C1B25 52%, #22101A 100%) !important;
background-size:160px 160px, auto !important;
background-position:0 0, center !important;
background-repeat:repeat, no-repeat !important;
}
html body .stage .device .screen.cold:not(.profile) .dar-season-pin::before,
html body .stage .device .screen.cold:not(.profile) .dar-local-pin::before{
top:0 !important;
bottom:0 !important;
height:auto !important;
min-height:100% !important;
background-color:#1E1A33 !important;
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(70% 110% at 88% 0%, rgba(79,141,247,.45) 0%, rgba(79,141,247,0) 62%),
radial-gradient(55% 90% at 6% 104%, rgba(124,79,214,.45) 0%, rgba(124,79,214,0) 60%),
radial-gradient(40% 60% at 55% 120%, rgba(90,200,255,.18) 0%, rgba(90,200,255,0) 60%),
linear-gradient(160deg, #1F1B36 0%, #2A2250 52%, #17142B 100%) !important;
}
/* iOS PWA black-translucent: фон под статус-баром = градиент шапки (padding-top pin), не отдельная плита html/body */
/* ============================================================
Итерация 3: профиль («Моя карта») в едином стиле с меню.
Кремовый фон вместо листопада, та же тёмная эспрессо-шапка,
клубная карта — тёмный эспрессо с янтарным и ягодным свечением.
============================================================ */
html body .stage .device .screen.screen.screen.screen.screen.screen.profile,
html body .stage .device .screen.screen.screen.screen.screen.screen.profile.cold{
background-color:#FFF6F0 !important;
background-image:
radial-gradient(120% 60% at 50% -10%, rgba(255,190,140,.30) 0%, rgba(255,190,140,0) 60%),
linear-gradient(180deg,#FFF7F1 0%,#FDF1EA 100%) !important;
background-size:auto, auto !important;
background-position:center top, center top !important;
background-repeat:no-repeat !important;
}
/* шапка профиля = шапка меню */
html body .stage .device .screen.screen.profile .dar-season-pin,
html body .stage .device .screen.screen.profile .dar-local-pin{
background:#2A1416 !important;
border-radius:0 0 26px 26px !important;
box-shadow:0 22px 40px -24px rgba(20,6,8,.75) !important;
padding-top:calc(env(safe-area-inset-top,0px) + 10px) !important;
padding-bottom:12px !important;
margin-bottom:14px !important;
}
html body .stage .device .screen.screen.profile .dar-season-pin::before,
html body .stage .device .screen.screen.profile .dar-local-pin::before{
background-color:#2A1416 !important;
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(70% 110% at 88% 0%, rgba(255,150,70,.55) 0%, rgba(255,150,70,0) 64%),
radial-gradient(55% 90% at 6% 104%, rgba(224,69,127,.50) 0%, rgba(224,69,127,0) 62%),
linear-gradient(160deg, #2E1518 0%, #3C1B25 52%, #22101A 100%) !important;
background-size:160px 160px, auto, auto, auto !important;
background-position:0 0, center, center, center !important;
background-repeat:repeat, no-repeat, no-repeat, no-repeat !important;
box-shadow:inset 0 -1px 0 rgba(255,255,255,.10) !important;
opacity:1 !important;
}
html body .stage .device .screen.screen.profile .dar-season-pin .mycardbtn,
html body .stage .device .screen.screen.profile .app-head .mycardbtn{
background:#FFFFFF !important;
border:0 !important;
box-shadow:0 10px 24px -14px rgba(0,0,0,.7) !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
html body .stage .device .screen.screen.profile .app-tagline-t1,
html body .stage .device .screen.screen.profile .dar-season-pin .app-tagline-t1{
font-size:14px !important;
font-weight:600 !important;
color:rgba(255,248,242,.96) !important;
-webkit-text-fill-color:rgba(255,248,242,.96) !important;
text-shadow:none !important;
}
html body .stage .device .screen.screen.profile .place-chip,
html body .stage .device .screen.screen.profile .dar-season-pin .place-chip{
background:none !important;
background-image:none !important;
border:0 !important;
box-shadow:none !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
height:auto !important;
min-height:0 !important;
padding:0 18px !important;
margin:2px 0 0 !important;
justify-content:center !important;
font-size:12px !important;
font-weight:500 !important;
color:rgba(255,240,232,.7) !important;
}
html body .stage .device .screen.screen.profile .place-chip-ic{ display:none !important; }
html body .stage .device .screen.screen.profile .place-chip-addr{ color:rgba(255,240,232,.82) !important; -webkit-text-fill-color:rgba(255,240,232,.82) !important; font-weight:600 !important; }
html body .stage .device .screen.screen.profile .place-chip-dot{ color:rgba(255,240,232,.35) !important; -webkit-text-fill-color:rgba(255,240,232,.35) !important; }
html body .stage .device .screen.screen.profile .place-chip-hrs,
html body .stage .device .screen.screen.profile .place-chip .place-chip-hrs{ color:#FFC978 !important; -webkit-text-fill-color:#FFC978 !important; font-weight:600 !important; background:none !important; }
/* текст профиля — тёмный на кремовом */
html body .stage .device .screen.screen.profile .pf-n{
color:var(--dd-ink) !important;
-webkit-text-fill-color:var(--dd-ink) !important;
text-shadow:none !important;
font-family:'Unbounded',sans-serif !important;
}
html body .stage .device .screen.screen.profile .pf-p{ color:var(--dd-mute) !important; -webkit-text-fill-color:var(--dd-mute) !important; text-shadow:none !important; }
html body .stage .device .screen.screen.profile .pf-edit{ background:var(--dd-soft) !important; color:var(--dd-a1) !important; }
html body .stage .device .screen.screen.profile .notif-on{ color:var(--dd-ink) !important; -webkit-text-fill-color:var(--dd-ink) !important; text-shadow:none !important; }
html body .stage .device .screen.screen.profile .notif-on svg{ color:#3FA34D !important; stroke:#3FA34D !important; }
html body .stage .device .screen.screen.profile .contacts{ color:var(--dd-mute) !important; text-shadow:none !important; }
html body .stage .device .screen.screen.profile .contacts .tel,
html body .stage .device .screen.screen.profile .contacts a{ color:var(--dd-ink) !important; -webkit-text-fill-color:var(--dd-ink) !important; text-decoration-color:rgba(42,21,24,.25) !important; }
html body .stage .device .screen.screen.profile .empty{ color:var(--dd-mute) !important; text-shadow:none !important; }
html body .stage .device .screen.screen.profile .again-cta,
html body .stage .device .screen.screen.profile .again-cta-prof{
background:#FFFFFF !important;
color:var(--dd-ink) !important;
border:1px solid rgba(42,21,24,.08) !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
box-shadow:0 10px 30px -18px rgba(90,35,25,.28) !important;
}
html body .stage .device .screen.screen.profile .again-cta .again-t{ color:var(--dd-ink) !important; }
html body .stage .device .screen.screen.profile .again-cta .again-s{ color:var(--dd-mute) !important; -webkit-text-fill-color:var(--dd-mute) !important; }
/* клубная карта — тёмный эспрессо со свечениями, как шапка */
html body .stage .device .screen .clubcard.clubcard.clubcard.clubcard.clubcard,
html body .stage .device .screen.profile .clubcard.clubcard.clubcard.clubcard.clubcard,
html body .stage .device .screen .clubcard.clubcard.clubcard.clubcard.clubcard.has-gift,
html body .stage .device .screen .clubcard.clubcard.clubcard.clubcard.clubcard.has-friend,
html body .stage .device .screen .clubcard.clubcard.clubcard.clubcard.clubcard.has-gift.has-friend,
html body .sheet .clubcard.clubcard.clubcard.clubcard.clubcard,
html.dc-android body .stage .device .screen .clubcard.clubcard.clubcard.clubcard.clubcard,
html.dc-honor body .stage .device .screen .clubcard.clubcard.clubcard.clubcard.clubcard{
background:
radial-gradient(70% 110% at 88% 0%, rgba(255,150,70,.55) 0%, rgba(255,150,70,0) 64%),
radial-gradient(55% 90% at 6% 104%, rgba(224,69,127,.50) 0%, rgba(224,69,127,0) 62%),
linear-gradient(160deg, #2E1518 0%, #3C1B25 52%, #22101A 100%) !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:
0 1px 0 rgba(255,255,255,.12) inset,
0 26px 50px -22px rgba(40,10,10,.65),
0 10px 24px -14px rgba(0,0,0,.3) !important;
}
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-qrplate,
html body .sheet .clubcard.clubcard.clubcard .cc-qrplate{
background:#FFFFFF !important;
border:1px solid rgba(255,255,255,.9) !important;
box-shadow:0 10px 24px -12px rgba(0,0,0,.6) !important;
}
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-qr path,
html body .sheet .clubcard.clubcard.clubcard .cc-qr path{ fill:#2A1518 !important; }
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-dot{ background:rgba(255,255,255,.16) !important; }
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-dot.on,
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-dot.gold,
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-dot.on.gold{
background:linear-gradient(90deg,#FFC978 0%,#FF9F5A 100%) !important;
box-shadow:0 0 10px rgba(255,180,100,.45) !important;
}
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-tgift{
background:rgba(255,255,255,.14) !important;
color:#FFC978 !important;
border:1px solid rgba(255,201,120,.4) !important;
}
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-pills > *,
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-stamps-sec,
html body .sheet .clubcard.clubcard.clubcard .cc-stamps-sec{
background:rgba(255,255,255,.12) !important;
border:1px solid rgba(255,255,255,.16) !important;
color:#FFF6EE !important;
-webkit-text-fill-color:#FFF6EE !important;
box-shadow:none !important;
-webkit-backdrop-filter:blur(8px) !important;
backdrop-filter:blur(8px) !important;
}
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-stamps-sec b{ color:#FFC978 !important; -webkit-text-fill-color:#FFC978 !important; }
/* ---------- Баннеры внизу меню не наслаиваются: «Домой» встаёт над «Меню без входа» ---------- */
html body .stage .device .screen:has(.guest-ban) .nbanner,
html body .stage .device .screen.cold:has(.guest-ban) .nbanner,
html body .stage .device .screen.vitrina-mode:has(.guest-ban) .nbanner{
bottom:calc(78px + 66px + env(safe-area-inset-bottom,0px)) !important;
}
html body .stage .device .screen:has(.guest-ban):has(.floatcart) .nbanner{
bottom:calc(78px + 66px + 64px + env(safe-area-inset-bottom,0px)) !important;
}
/* ---------- Витрина: «+» в том же языке, что кнопка настройки у напитков ---------- */
html body .stage .device .screen.vitrina-mode .item.vit-row .vit-go,
html body .stage .device .screen.vitrina-mode .vit-go{
width:36px !important;
height:36px !important;
min-width:36px !important;
min-height:36px !important;
border-radius:50% !important;
background:var(--dd-grad) !important;
background-image:var(--dd-grad) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-size:22px !important;
font-weight:500 !important;
box-shadow:0 10px 20px -10px rgba(224,69,127,.75) !important;
animation:none !important;
}
html body .stage .device .screen.vitrina-mode .vit-go::before,
html body .stage .device .screen.vitrina-mode .vit-go::after{ display:none !important; content:none !important; animation:none !important; }
html body .stage .device .screen.vitrina-mode .vit-go.off,
html body .stage .device .screen.vitrina-mode .item.vit-row.sold .vit-go{
background:var(--dd-soft) !important;
background-image:none !important;
color:#B9A6AB !important;
-webkit-text-fill-color:#B9A6AB !important;
box-shadow:none !important;
opacity:1 !important;
}
/* ---------- Поиск и избранное: были собраны, но скрыты — включаем ---------- */
html body .stage .device .screen:not(.profile) .srow,
html body .stage .device .screen:not(.profile):not(.vitrina-mode) .srow{
display:flex !important;
position:relative !important;
top:auto !important;
z-index:5 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
gap:8px !important;
margin:12px 14px 0 !important;
padding:0 !important;
overflow:visible !important;
}
html body .stage .device .screen:not(.profile) .srow .search{
display:flex !important;
align-items:center !important;
gap:10px !important;
flex:1 !important;
height:44px !important;
min-height:44px !important;
max-height:none !important;
padding:0 14px !important;
background:#FFFFFF !important;
border:1px solid rgba(42,21,24,.08) !important;
border-radius:16px !important;
box-shadow:0 6px 18px -14px rgba(90,35,25,.3) !important;
color:var(--dd-mute) !important;
opacity:1 !important;
visibility:visible !important;
overflow:hidden !important;
}
html body .stage .device .screen:not(.profile) .srow .search svg{ color:var(--dd-mute) !important; flex:none !important; }
html body .stage .device .screen:not(.profile) .srow .search input{
flex:1 !important;
min-width:0 !important;
height:100% !important;
border:0 !important;
outline:none !important;
background:transparent !important;
color:var(--dd-ink) !important;
-webkit-text-fill-color:var(--dd-ink) !important;
font-family:'Rubik',system-ui,sans-serif !important;
font-size:15px !important;
font-weight:500 !important;
}
html body .stage .device .screen:not(.profile) .srow .search input::placeholder{ color:#B9A6AB !important; -webkit-text-fill-color:#B9A6AB !important; }
html body .stage .device .screen:not(.profile) .srow .search:focus-within{
border-color:rgba(224,69,127,.45) !important;
box-shadow:0 0 0 4px rgba(224,69,127,.12) !important;
}
html body .stage .device .screen:not(.profile) .srow .favbtn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:44px !important;
height:44px !important;
flex:none !important;
border-radius:16px !important;
background:#FFFFFF !important;
border:1px solid rgba(42,21,24,.08) !important;
color:var(--dd-mute) !important;
box-shadow:0 6px 18px -14px rgba(90,35,25,.3) !important;
padding:0 !important;
}
html body .stage .device .screen:not(.profile) .srow .favbtn.on{
background:var(--dd-ink) !important;
border-color:var(--dd-ink) !important;
color:#FF6B85 !important;
}
html body .stage .device .screen:not(.profile) .srow .favbtn.on svg{ fill:currentColor !important; }
/* сердечко у напитка */
html body .stage .device .screen:not(.vitrina-mode) .item .fav,
html body .stage .device .screen:not(.vitrina-mode) .item.single > .itop > .fav,
html body .stage .device .screen:not(.vitrina-mode) button.fav{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:30px !important;
height:30px !important;
min-width:30px !important;
border-radius:50% !important;
background:var(--dd-soft) !important;
color:#C9B5BA !important;
border:0 !important;
padding:0 !important;
margin-right:8px !important;
flex:none !important;
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
animation:none !important;
}
html body .stage .device .screen:not(.vitrina-mode) .item .fav.on{
background:#FFE9EE !important;
color:#E0457F !important;
}
html body .stage .device .screen:not(.vitrina-mode) .item .fav.on svg{ fill:currentColor !important; }
html body .stage .device .screen:not(.profile) .srow{ width:auto !important; max-width:none !important; min-width:0 !important; }
html body .stage .device .screen:not(.profile) .srow .search{ width:auto !important; max-width:none !important; min-width:0 !important; flex:1 1 auto !important; }
html body .stage .device .screen:not(.profile) .srow .search input{ width:100% !important; max-width:none !important; display:block !important; opacity:1 !important; visibility:visible !important; }
/* сердечко — своя колонка слева, имя и цены не съезжают */
html body .stage .device .screen:not(.vitrina-mode) .item.single .itop,
html body .stage .device .screen:not(.vitrina-mode) .item .itop{
grid-template-columns:30px minmax(0,1fr) auto !important;
column-gap:8px !important;
}
html body .stage .device .screen:not(.vitrina-mode) .item .itop > .fav{ grid-column:1 !important; grid-row:1 !important; margin:0 !important; }
html body .stage .device .screen:not(.vitrina-mode) .item .itop > .nm{ grid-column:2 !important; grid-row:1 !important; }
html body .stage .device .screen:not(.vitrina-mode) .item .itop > .iright{ grid-column:3 !important; grid-row:1 !important; }
html body .stage .device .screen:not(.profile) .srow .search,
html body .stage .device .screen:not(.profile) .srow .search input{ position:static !important; left:auto !important; top:auto !important; transform:none !important; }
/* сезон прятал поиск (left:-9999 + pointer-events:none). Поле видно, тап шёл сквозь него. */
html body .stage .device .screen:not(.profile) .srow,
html body .stage .device .screen:not(.profile) .srow .search,
html body .stage .device .screen:not(.profile) .srow .search svg,
html body .stage .device .screen:not(.profile) .srow .search input,
html body .stage .device .screen:not(.profile) .srow .favbtn{
pointer-events:auto !important;
left:auto !important;
}
html body .stage .device .screen:not(.profile) .srow .search{ cursor:text !important; }
html body .stage .device .screen:not(.profile) .srow .search input{ font-size:16px !important; }
html.kb-search .view,
html.menu-q .view{ overflow-anchor:none !important; }
html.kb-search .srow .search input,
html.menu-q .srow .search input{ scroll-margin:0 !important; scroll-margin-top:0 !important; }
html.kb-search body .stage .device .screen:not(.profile) .srow,
html.menu-q body .stage .device .screen:not(.profile) .srow{
position:sticky !important;
top:var(--dd-pin-h, 135px) !important;
z-index:41 !important;
margin:0 !important;
padding:8px 14px 8px !important;
background:rgba(255,246,240,.96) !important;
-webkit-backdrop-filter:blur(12px) saturate(1.1) !important;
backdrop-filter:blur(12px) saturate(1.1) !important;
}
html.kb-search body .stage .device .screen.cold:not(.profile) .srow,
html.menu-q body .stage .device .screen.cold:not(.profile) .srow{
background:rgba(243,244,253,.96) !important;
}
html.kb-search body .stage .device .screen .chipbar,
html.menu-q body .stage .device .screen .chipbar{
top:calc(var(--dd-pin-h, 135px) + var(--dd-srow-h, 56px)) !important;
}
html.kb-search body .stage .device .screen .view{
padding-bottom:calc(24px + env(safe-area-inset-bottom,0px) + var(--kb-inset, 0px)) !important;
}
html.menu-q .chips .chip{ animation:none !important; }
html body .stage .device .screen:not(.vitrina-mode) .item .itop{ grid-template-columns:26px minmax(0,1fr) auto !important; column-gap:6px !important; }
html body .stage .device .screen:not(.vitrina-mode) .item .itop > .fav{ width:26px !important; height:26px !important; min-width:26px !important; }
html body .stage .device .screen:not(.vitrina-mode) .item .itop > .fav svg{ width:14px !important; height:14px !important; }
html body .stage .device .screen .item .nm .nm-row{ flex-wrap:wrap !important; row-gap:3px !important; overflow:visible !important; }
html body .stage .device .screen:not(.vitrina-mode) .item .itop > .nm{ overflow:visible !important; flex-wrap:wrap !important; }
html body .stage .device .screen:not(.vitrina-mode) .item .nm .nm-row{ display:flex !important; align-items:center !important; gap:6px !important; min-width:0 !important; }
html body .stage .device .screen:not(.vitrina-mode) .item .nm .nm-row .nmt{ flex:0 1 auto !important; }
html body .stage .device .screen:not(.vitrina-mode) .item .itop > .iright{ max-width:none !important; flex:none !important; }
html body .stage .device .screen:not(.vitrina-mode) .item .itop > .iright{ padding-right:6px !important; }
/* ---------- Статус заказа: карточка целиком помещается на экран (без внутренней прокрутки) ---------- */
html body .stage .device .screen .ord-ticket{
max-height:min(calc(100dvh - 86px - 14px - env(safe-area-inset-bottom,0px)), 720px) !important;
padding:6px 16px 12px !important;
border-radius:28px !important;
}
html body .stage .device .screen .ord-ticket .tk-grab{ margin:2px auto 6px !important; }
html body .stage .device .screen .ord-ticket .tk-kicker{ margin:0 auto 6px !important; padding:4px 10px !important; }
html body .stage .device .screen .ord-ticket .tk-say{ font-size:18px !important; line-height:1.2 !important; margin:0 !important; }
html body .stage .device .screen .ord-ticket .tk-progress{ margin:10px 0 2px !important; padding:8px 6px 6px !important; }
html body .stage .device .screen .ord-ticket .tk-line{ margin:0 0 6px !important; }
html body .stage .device .screen .ord-ticket .tk-card{ padding:11px 14px 10px !important; }
html body .stage .device .screen .ord-ticket .tk-items{ font-size:15px !important; line-height:1.3 !important; }
html body .stage .device .screen .ord-ticket .tk-meta{ margin-top:3px !important; font-size:12px !important; }
html body .stage .device .screen .ord-ticket .tk-sum{ margin-top:6px !important; font-size:20px !important; }
html body .stage .device .screen .ord-ticket .tk-gift{ margin-top:8px !important; }
html body .stage .device .screen .ord-ticket .tk-sber{ margin-top:8px !important; padding:10px 12px !important; }
html body .stage .device .screen .ord-ticket .tk-chips{ margin-top:8px !important; }
html body .stage .device .screen .ord-ticket .tk-thread{ margin-top:8px !important; padding:8px 10px 10px !important; }
html body .stage .device .screen .ord-ticket .tk-thread-h{ margin-bottom:6px !important; }
html body .stage .device .screen .ord-ticket .tk-msg{ padding:7px 10px !important; margin-top:5px !important; }
html body .stage .device .screen .ord-ticket .tk-msg-t{ font-size:13px !important; line-height:1.3 !important; }
html body .stage .device .screen .ord-ticket .tk-thread-box{ margin-top:8px !important; }
html body .stage .device .screen .ord-ticket .tk-thread-in,
html body .stage .device .screen .ord-ticket .tk-thread-send{ height:38px !important; }
html body .stage .device .screen .ord-ticket .tk-note{ margin:8px 0 0 !important; padding:10px 12px 9px !important; }
html body .stage .device .screen .ord-ticket .tk-note-lead{ font-size:12.5px !important; margin:0 0 4px !important; }
html body .stage .device .screen .ord-ticket .tk-note-b{ font-size:12px !important; line-height:1.4 !important; }
html body .stage .device .screen .ord-ticket .tk-sign{ margin-top:6px !important; font-size:11.5px !important; }
html body .stage .device .screen .ord-ticket .tk-sub{ margin:8px 0 0 !important; }
html body .stage .device .screen .ord-ticket .tk-cta{ margin-top:10px !important; height:46px !important; flex:none !important; }
/* ---------- Оценка заказа: текст отзыва + подсказка после копирования ---------- */
html body .stage .device .screen .sheet.sheet-rate .rate-good-text{
width:100% !important; box-sizing:border-box !important; margin-top:8px !important;
background:#fff !important; border:1px solid rgba(90,42,60,.12) !important; border-radius:16px !important;
padding:11px 13px !important; font:600 14px/1.4 'Manrope',system-ui,sans-serif !important; color:#2A1416 !important;
box-shadow:0 8px 20px -16px rgba(80,20,40,.25) !important;
}
html body .stage .device .screen .sheet.sheet-rate .rate-good-text::placeholder{ color:#A88A96 !important; font-weight:500 !important; }
html body .stage .device .screen .sheet.sheet-rate .rate-good-text:focus{ outline:none !important; border-color:#BE3578 !important; box-shadow:0 0 0 3px rgba(190,53,120,.14) !important; }
html body .stage .device .screen .sheet.sheet-rate .rate-copied{
margin:10px 0 2px !important; padding:10px 12px !important; border-radius:14px !important;
background:#EAF7EE !important; color:#1F7A45 !important; font:700 12.5px/1.4 'Manrope',system-ui,sans-serif !important;
}
html body .stage .device .screen .sheet.sheet-rate .seg{ margin-top:10px !important; }
/* ---------- Витрина: карточка товара помещается в экран без прокрутки ----------
Фото — гибкий flex-элемент: ужимается, когда текст/КБЖУ/кнопки не влезают, и остаётся
квадратным, когда места достаточно. Прокрутка остаётся только как страховка. */
html body .stage .device .screen .sheet.sheet-vit{
max-height:calc(100% - 16px - env(safe-area-inset-bottom,0px)) !important;
bottom:max(8px, env(safe-area-inset-bottom,0px)) !important;
padding-bottom:10px !important;
}
html body .stage .device .screen .sheet.sheet-vit .sh-h{ padding:12px 16px 4px !important; }
html body .stage .device .screen .sheet.sheet-vit .sh-body{
display:flex !important; flex-direction:column !important;
padding:4px 16px 10px !important;
}
html body .stage .device .screen .sheet.sheet-vit .sh-body > *{ flex:0 0 auto !important; }
html body .stage .device .screen .sheet.sheet-vit .vit-photo-wrap{
flex:0 1 auto !important; min-height:120px !important; margin:0 0 8px !important;
}
html body .stage .device .screen .sheet.sheet-vit .vit-desc{ font-size:13.5px !important; line-height:1.4 !important; margin:0 0 6px !important; }
html body .stage .device .screen .sheet.sheet-vit .vit-block{ margin:0 0 8px !important; }
html body .stage .device .screen .sheet.sheet-vit .vit-block-t{ margin:0 0 3px !important; }
html body .stage .device .screen .sheet.sheet-vit .vit-block-b{ font-size:13px !important; line-height:1.38 !important; }
html body .stage .device .screen .sheet.sheet-vit .vit-nutri{ margin:0 !important; }
html body .stage .device .screen .sheet.sheet-vit .vit-nutri-cell{ padding:7px 4px 6px !important; border-radius:12px !important; }
html body .stage .device .screen .sheet.sheet-vit .vit-price-line{ margin:4px 0 8px !important; font-size:17px !important; }
html body .stage .device .screen .sheet.sheet-vit .vit-stock-btn{ margin:0 0 8px !important; padding:9px 12px !important; }
html body .stage .device .screen .sheet.sheet-vit .vit-qty-row{ margin:0 0 8px !important; padding:6px 10px !important; }
html body .stage .device .screen .sheet.sheet-vit .vit-add{ padding:13px 16px !important; }
/* ---------- Переписка с бариста (v930) ---------- */
html body .stage .device .screen .ord-ticket .tk-thread-hint{
margin:0 0 6px !important; padding:8px 10px !important; border-radius:12px !important;
background:#FFF3E6 !important; color:#7A4A2A !important;
font:700 12px/1.35 'Manrope',system-ui,sans-serif !important; text-align:left !important;
}
html body .stage .device .screen .ord-ticket .tk-msg.kassa{
background:linear-gradient(135deg,#2A1416,#4A2230) !important;
}
html body .stage .device .screen .ord-ticket .tk-msg.kassa .tk-msg-who{ color:#FFD08A !important; }
html body .stage .device .screen .ord-ticket .tk-msg.kassa .tk-msg-t{ color:#fff !important; }
html body .stage .device .screen .ord-ticket .tk-msg.guest{ background:#F4EEF0 !important; }
html body .stage .device .screen .ord-ticket .tk-msg.guest .tk-msg-who{ color:#8A6A76 !important; }
html body .stage .device .screen .ord-ticket .tk-quick{
display:flex !important; gap:6px !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important;
margin:8px -2px 0 !important; padding:0 2px 2px !important; scrollbar-width:none !important;
}
html body .stage .device .screen .ord-ticket .tk-quick::-webkit-scrollbar{ display:none !important; }
html body .stage .device .screen .ord-ticket .tk-quick-b{
flex:none !important; height:30px !important; padding:0 11px !important; border-radius:999px !important;
border:1px solid rgba(90,42,60,.14) !important; background:#fff !important; color:#2A1416 !important;
font:700 12px/1 'Manrope',system-ui,sans-serif !important; white-space:nowrap !important; cursor:pointer !important;
box-shadow:0 6px 14px -12px rgba(80,20,40,.4) !important;
}
html body .stage .device .screen .ord-ticket .tk-quick-b:active{ transform:scale(.97) !important; background:#F6EEF1 !important; }
html body .stage .device .screen .ord-ticket .tk-thread-send{
background:linear-gradient(135deg,#2A1416,#4A2230) !important;
}
/* кнопка чата на карточке живого заказа */
html body .stage .device .screen .live-card .lo-bot{ flex-wrap:wrap !important; }
html body .stage .device .screen .live-card .lo-chat{
display:inline-flex !important; align-items:center !important; gap:6px !important;
margin-left:auto !important; height:30px !important; padding:0 11px !important; border-radius:999px !important;
border:1px solid rgba(90,42,60,.14) !important; background:#fff !important; color:#2A1416 !important;
font:800 12px/1 'Manrope',system-ui,sans-serif !important; white-space:nowrap !important; cursor:pointer !important;
box-shadow:0 8px 16px -12px rgba(80,20,40,.45) !important;
}
html body .stage .device .screen .live-card .lo-chat svg{ flex:none !important; }
html body .stage .device .screen .live-card .lo-chat.has-new{
background:linear-gradient(135deg,#2A1416,#4A2230) !important; color:#fff !important; border-color:transparent !important;
animation:loChatPulse 1.6s ease-in-out infinite !important;
}
html body .stage .device .screen .live-card .lo-chat-n{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
min-width:18px !important; height:18px !important; padding:0 5px !important; border-radius:9px !important;
background:#FFC978 !important; color:#2A1416 !important; font:800 11px/1 'Unbounded',sans-serif !important;
}
@keyframes loChatPulse{ 0%,100%{ box-shadow:0 8px 16px -12px rgba(80,20,40,.45),0 0 0 0 rgba(255,201,120,.55) } 50%{ box-shadow:0 8px 16px -12px rgba(80,20,40,.45),0 0 0 6px rgba(255,201,120,0) } }
/* бейдж непрочитанного на полоске живого заказа */
html body .stage .device .screen .tk-bar .tk-bar-chat{
flex:none !important; margin-left:auto !important; padding:5px 9px !important; border-radius:999px !important;
background:linear-gradient(135deg,#2A1416,#4A2230) !important; color:#fff !important;
font:800 11px/1 'Manrope',system-ui,sans-serif !important; white-space:nowrap !important;
}
/* клавиатура в билете заказа (переписка): билет стоит над клавиатурой, stage не сжимаем */
html.kb-sheet body .stage .device .screen .ord-ticket{
bottom:max(8px, var(--tk-kb-inset, 0px)) !important;
max-height:min(calc(var(--tk-kb-h, 72dvh) - 16px), 720px) !important;
animation:none !important; transition:none !important;
}
/* переписка: список сообщений — своя прокрутка, билет целиком помещается на экран */
html body .stage .device .screen .ord-ticket .tk-msgs{
display:flex !important; flex-direction:column !important;
max-height:min(34dvh, 300px) !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important; scrollbar-width:none !important;
margin:0 -4px !important; padding:0 4px 2px !important;
-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 10px, #000 100%) !important;
mask-image:linear-gradient(180deg, transparent 0, #000 10px, #000 100%) !important;
}
html body .stage .device .screen .ord-ticket .tk-msgs::-webkit-scrollbar{ display:none !important; }
html body .stage .device .screen .ord-ticket .tk-msgs .tk-msg{ flex:none !important; padding:6px 10px 7px !important; margin-top:6px !important; border-radius:14px !important; }
html body .stage .device .screen .ord-ticket .tk-msgs .tk-msg:first-child{ margin-top:2px !important; }
/* v948: гость («Вы») — справа, светлый; бариста — слева, тёмный (зеркало кассы v947) */
html body .stage .device .screen .ord-ticket .tk-msgs .tk-msg.guest{ margin-left:auto !important; margin-right:0 !important; border-bottom-right-radius:6px !important; }
html body .stage .device .screen .ord-ticket .tk-msgs .tk-msg.kassa{ margin-right:auto !important; margin-left:0 !important; border-bottom-left-radius:6px !important; }
html body .stage .device .screen .ord-ticket .tk-msgs .tk-msg.guest .tk-msg-who{ text-align:right !important; }
html body .stage .device .screen .ord-ticket .tk-msgs .tk-msg.kassa .tk-msg-who{ text-align:left !important; }
html body .stage .device .screen .ord-ticket .tk-msgs .tk-msg.cont{ margin-top:3px !important; }
html body .stage .device .screen .ord-ticket .tk-msgs .tk-msg.cont .tk-msg-who{ display:none !important; }
html body .stage .device .screen .ord-ticket .tk-msgs .tk-msg-who{ margin-bottom:1px !important; font-size:9.5px !important; }
html body .stage .device .screen .ord-ticket .tk-msgs .tk-msg-t{ font-size:13px !important; line-height:1.3 !important; }
/* билет: при нехватке места сжимается только список сообщений (до 64px), шапка/состав/поле/кнопка всегда видны */
html body .stage .device .screen .ord-ticket > *{ flex:0 0 auto !important; }
html body .stage .device .screen .ord-ticket .tk-thread{
flex:0 1 auto !important; min-height:0 !important;
display:flex !important; flex-direction:column !important;
}
html body .stage .device .screen .ord-ticket .tk-thread > *{ flex:0 0 auto !important; }
html body .stage .device .screen .ord-ticket .tk-thread .tk-msgs{ flex:0 1 auto !important; min-height:64px !important; }
/* клавиатура: не залезаем под статус-бар (env() в зумированном html меньше реального — домножаем на 1/zoom) */
html.kb-sheet body .stage .device .screen .ord-ticket{
max-height:min(calc(var(--tk-kb-h, 72dvh) - 16px - env(safe-area-inset-top, 0px) * var(--tk-z, 1)), 720px) !important;
}
html.kb-sheet body .stage .device .screen .ord-ticket .tk-msgs{ max-height:min(26dvh, 220px) !important; }
/* клавиатура в переписке: прячем «Понятно» / текст / отмену — иначе они наезжают на поле ввода */
html.kb-ticket body .stage .device .screen .ord-ticket{
overflow:hidden !important;
padding-bottom:10px !important;
}
html.kb-ticket body .stage .device .screen .ord-ticket .tk-note,
html.kb-ticket body .stage .device .screen .ord-ticket .tk-cta,
html.kb-ticket body .stage .device .screen .ord-ticket .tk-cancel-wrap,
html.kb-ticket body .stage .device .screen .ord-ticket .tk-sub,
html.kb-ticket body .stage .device .screen .ord-ticket .tk-tips,
html.kb-ticket body .stage .device .screen .ord-ticket .tk-sber,
html.kb-ticket body .stage .device .screen .ord-ticket .tk-chips,
html.kb-ticket body .stage .device .screen .ord-ticket .tk-progress{
display:none !important;
}
html.kb-ticket body .stage .device .screen .ord-ticket .tk-thread{
flex:1 1 auto !important; min-height:0 !important;
}
html.kb-ticket body .stage .device .screen .ord-ticket .tk-thread .tk-msgs{
flex:1 1 auto !important; max-height:none !important; min-height:48px !important;
}
html.kb-ticket body .stage .device .screen .ord-ticket .tk-thread-box,
html.kb-ticket body .stage .device .screen .ord-ticket .tk-quick{
flex:none !important;
}
/* отмена заказа гостем (пока «новый») */
html body .stage .device .screen .ord-ticket .tk-cancel-wrap{ flex:none !important; margin-top:6px !important; text-align:center !important; }
html body .stage .device .screen .ord-ticket .tk-cancel{
border:none !important; background:none !important; padding:8px 12px !important; cursor:pointer !important;
color:#9A6070 !important; font:700 12.5px/1 'Manrope',system-ui,sans-serif !important; text-decoration:underline !important; text-underline-offset:3px !important;
}
html body .stage .device .screen .ord-ticket .tk-cancel-ask{
display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; flex-wrap:wrap !important;
padding:8px 10px !important; border-radius:14px !important; background:#FFF0F0 !important;
}
html body .stage .device .screen .ord-ticket .tk-cancel-q{ color:#8A2E2E !important; font:800 12.5px/1.2 'Manrope',system-ui,sans-serif !important; }
html body .stage .device .screen .ord-ticket .tk-cancel-yes,
html body .stage .device .screen .ord-ticket .tk-cancel-no{
height:30px !important; padding:0 12px !important; border-radius:999px !important; cursor:pointer !important;
font:800 12px/1 'Manrope',system-ui,sans-serif !important;
}
html body .stage .device .screen .ord-ticket .tk-cancel-yes{ border:none !important; background:#B03A3A !important; color:#fff !important; }
html body .stage .device .screen .ord-ticket .tk-cancel-no{ border:1px solid rgba(90,42,60,.16) !important; background:#fff !important; color:#2A1416 !important; }
html body .stage .device .screen .ord-ticket .tk-cancel-err{
margin-top:6px !important; padding:8px 10px !important; border-radius:12px !important;
background:#FFF3E6 !important; color:#7A4A2A !important; font:700 12px/1.35 'Manrope',system-ui,sans-serif !important;
}
/* ---------- Закрыто → предзаказ к открытию ---------- */
html body .stage .device .screen .sheet-checkout .co-closed{
display:flex !important; gap:12px !important; align-items:flex-start !important;
margin:14px 0 4px !important; padding:12px 14px !important; border-radius:18px !important;
background:linear-gradient(135deg,#2A1416,#4A2230) !important; color:#fff !important;
box-shadow:0 14px 30px -20px rgba(42,20,22,.8) !important;
}
html body .stage .device .screen .sheet-checkout .co-closed-ic{ font-size:22px !important; line-height:1 !important; margin-top:2px !important; }
html body .stage .device .screen .sheet-checkout .co-closed-t{ font:800 14.5px/1.25 'Manrope',system-ui,sans-serif !important; color:#fff !important; }
html body .stage .device .screen .sheet-checkout .co-closed-s{ margin-top:4px !important; font:600 12.5px/1.35 'Manrope',system-ui,sans-serif !important; color:rgba(255,255,255,.78) !important; }
html body .stage .device .screen .sheet-checkout .pre-slots{
display:flex !important; gap:8px !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important;
margin:0 -4px !important; padding:2px 4px 6px !important; scrollbar-width:none !important;
}
html body .stage .device .screen .sheet-checkout .pre-slots::-webkit-scrollbar{ display:none !important; }
html body .stage .device .screen .sheet-checkout .pre-slot{
flex:none !important; height:40px !important; padding:0 16px !important; border-radius:999px !important; cursor:pointer !important;
border:1.5px solid rgba(90,42,60,.16) !important; background:#fff !important; color:#2A1416 !important;
font:800 14px/1 'Manrope',system-ui,sans-serif !important; -webkit-appearance:none !important; appearance:none !important;
box-shadow:0 8px 18px -14px rgba(80,20,40,.5) !important; transition:transform .12s ease !important;
}
html body .stage .device .screen .sheet-checkout .pre-slot:active{ transform:scale(.96) !important; }
html body .stage .device .screen .sheet-checkout .pre-slot.on{
border-color:transparent !important; color:#fff !important;
background:linear-gradient(135deg,#C43D80,#E8955A) !important; box-shadow:0 10px 22px -12px rgba(196,61,128,.7) !important;
}
html body .stage .device .screen .sheet-checkout.co-is-deliv .addr-block{
margin-top:10px !important; padding:12px 12px 10px !important; border-radius:18px !important;
background:linear-gradient(180deg,#FFF8F2,#FFF1E8) !important; border:1.5px solid rgba(196,61,128,.16) !important;
}
html body .stage .device .screen .sheet-checkout .deliv-eta{
margin-top:8px !important; font:700 12.5px/1.3 'Manrope',system-ui,sans-serif !important; color:#7A4A62 !important;
}
html body .stage .device .screen .sheet-checkout.co-is-deliv .co-head-sub{ color:#C43D80 !important; }
html body .stage .device .screen .ord-ticket .tk-thread .tk-msgs:empty{ display:none !important; min-height:0 !important; }
/* ---------- Оценка заказа + клавиатура: компактно, поле ввода над клавой ---------- */
html.kb-sheet body .sheet.sheet-rate.sheet-rate{
position:fixed !important; left:10px !important; right:10px !important; top:auto !important;
bottom:max(8px, var(--sh-kb-inset, var(--kb-inset, 0px))) !important;
max-height:min(calc(var(--sh-kb-h, 72dvh) - 16px - env(safe-area-inset-top, 0px) * var(--sh-z, 1)), 640px) !important;
display:flex !important; flex-direction:column !important;
border-radius:22px !important; animation:none !important; transition:none !important; transform:none !important;
}
html.kb-sheet body .sheet.sheet-rate.sheet-rate .sh-h{ flex:none !important; padding-top:6px !important; padding-bottom:4px !important; }
html.kb-sheet body .sheet.sheet-rate.sheet-rate .grab{ display:none !important; }
html.kb-sheet body .sheet.sheet-rate.sheet-rate .sh-body{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; padding-top:2px !important; }
/* герой и подсказка не нужны, когда человек уже печатает */
html.kb-sheet body .sheet.sheet-rate.sheet-rate .rate-emoji,
html.kb-sheet body .sheet.sheet-rate.sheet-rate .rate-hint{ display:none !important; }
html.kb-sheet body .sheet.sheet-rate.sheet-rate .rate-hero{ margin:0 0 6px !important; padding:0 !important; }
html.kb-sheet body .sheet.sheet-rate.sheet-rate .rate-stars-wrap{ margin:0 0 4px !important; padding:6px 10px !important; }
html.kb-sheet body .sheet.sheet-rate.sheet-rate .ratestars button svg{ width:28px !important; height:28px !important; }
html.kb-sheet body .sheet.sheet-rate.sheet-rate .opt-l{ margin:8px 0 6px !important; }
html.kb-sheet body .sheet.sheet-rate.sheet-rate textarea.addr{
min-height:96px !important; max-height:150px !important; font-size:16px !important;
border-color:#E4568F !important; box-shadow:0 0 0 3px rgba(228,86,143,.16) !important; background:#fff !important;
}
/* ---------- Чаевые бариста (этап 1, v943): блок в билете выданного заказа и в окне оценки ---------- */
html body .tk-tips{
margin-top:10px !important; padding:12px 12px 12px !important; border-radius:18px !important;
background:linear-gradient(160deg,#FFF6E3 0%,#FFE9C4 100%) !important; border:1px solid rgba(220,160,60,.28) !important;
box-shadow:0 14px 30px -24px rgba(180,110,20,.55) !important; text-align:left !important;
}
html body .sheet-rate .tk-tips{ margin:12px 0 4px !important; }
html body .tk-tips-h{ display:flex !important; align-items:flex-start !important; gap:10px !important; }
html body .tk-tips-ic{ flex:none !important; width:34px !important; height:34px !important; border-radius:12px !important; background:#fff !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:18px !important; box-shadow:0 6px 14px -10px rgba(180,110,20,.6) !important; }
html body .tk-tips-hm{ flex:1 !important; min-width:0 !important; }
html body .tk-tips-t{ font:800 15px/1.2 'Manrope',system-ui,sans-serif !important; color:#3A2410 !important; letter-spacing:-.01em !important; }
html body .tk-tips-s{ margin-top:3px !important; font:600 12px/1.35 'Manrope',system-ui,sans-serif !important; color:#8A6420 !important; }
html body .tk-tips-row{ display:flex !important; gap:7px !important; margin-top:11px !important; flex-wrap:wrap !important; }
html body .tk-tip-b{
flex:1 1 0 !important; min-width:62px !important; height:42px !important; border-radius:13px !important; border:1px solid rgba(180,120,30,.25) !important;
background:#fff !important; color:#3A2410 !important; font:800 15px/1 'Manrope',system-ui,sans-serif !important; cursor:pointer !important;
box-shadow:0 8px 16px -14px rgba(180,110,20,.6) !important;
}
html body .tk-tip-b.other{ flex:1 1 0 !important; font-size:13.5px !important; color:#8A6420 !important; background:rgba(255,255,255,.6) !important; }
html body .tk-tip-b:active{ transform:scale(.97) !important; }
html body .tk-tips-custom{ display:flex !important; gap:7px !important; margin-top:11px !important; align-items:center !important; }
html body .tk-tip-in{
flex:1 !important; min-width:0 !important; height:44px !important; padding:0 12px !important; border-radius:13px !important; border:1px solid rgba(180,120,30,.3) !important;
background:#fff !important; color:#3A2410 !important; font:800 16px/1 'Manrope',system-ui,sans-serif !important; outline:none !important;
}
html body .tk-tip-in:focus{ border-color:#D98E1E !important; box-shadow:0 0 0 3px rgba(217,142,30,.18) !important; }
html body .tk-tip-go{
flex:none !important; height:44px !important; padding:0 16px !important; border:0 !important; border-radius:13px !important; cursor:pointer !important;
background:linear-gradient(135deg,#2A1416,#4A2230) !important; color:#fff !important; font:800 14px/1 'Manrope',system-ui,sans-serif !important;
box-shadow:0 12px 24px -16px rgba(42,20,22,.8) !important;
}
html body .tk-tip-back{
flex:none !important; height:44px !important; padding:0 10px !important; border:0 !important; background:transparent !important; cursor:pointer !important;
color:#8A6420 !important; font:700 13px/1 'Manrope',system-ui,sans-serif !important; text-decoration:underline !important; text-decoration-color:rgba(138,100,32,.4) !important; text-underline-offset:3px !important;
}
html body .tk-tips-pay{ margin-top:11px !important; display:flex !important; flex-direction:column !important; gap:8px !important; }
html body .tk-tips-amt{ font:800 17px/1.2 'Unbounded','Manrope',system-ui,sans-serif !important; color:#2A1416 !important; }
html body .tk-tips-arr{ color:#C08A2A !important; margin:0 2px !important; }
html body .tk-tips-n{ font:800 16px/1.2 'Manrope',system-ui,sans-serif !important; color:#3A2410 !important; letter-spacing:.02em !important; padding:9px 12px !important; border-radius:12px !important; background:#fff !important; border:1px dashed rgba(180,120,30,.4) !important; text-align:center !important; }
html body .tk-tips-acts{ display:flex !important; gap:7px !important; }
html body .tk-tips-acts .tk-tip-go{ flex:1 1 0 !important; padding:0 10px !important; }
html body .tk-tip-copy{
flex:1 1 0 !important; height:44px !important; padding:0 10px !important; border-radius:13px !important; border:1px solid rgba(180,120,30,.3) !important; cursor:pointer !important;
background:#fff !important; color:#3A2410 !important; font:800 13.5px/1 'Manrope',system-ui,sans-serif !important;
}
html body .tk-tip-done{
height:46px !important; border:0 !important; border-radius:14px !important; cursor:pointer !important;
background:linear-gradient(135deg,#7FC13C,#A3D95A) !important; color:#173A00 !important; font:800 15px/1 'Manrope',system-ui,sans-serif !important;
box-shadow:0 12px 26px -16px rgba(90,150,30,.8) !important;
}
html body .tk-tip-done:active{ transform:scale(.98) !important; }
html body .tk-tips-pay .tk-tip-back{ align-self:center !important; height:32px !important; }
html body .tk-tips-thanks{ margin-top:10px !important; padding:10px 12px !important; border-radius:12px !important; background:rgba(255,255,255,.7) !important; font:700 13px/1.35 'Manrope',system-ui,sans-serif !important; color:#5A3A10 !important; text-align:center !important; }
/* в билете: как и остальные блоки — не растягивается */
html body .stage .device .screen .ord-ticket .tk-tips{ flex:0 0 auto !important; margin-top:8px !important; }
/* клавиатура открыта под отзыв — блок чаевых уступает место (кроме случая, когда вводят свою сумму) */
html.kb-sheet body .sheet.sheet-rate.sheet-rate .tk-tips:not(:has(.tk-tip-in:focus)){ display:none !important; }
/* ---------- Пригласи друга (этап 2, v945): карточка в профиле ---------- */
html body .stage .device .screen .refcard{
margin:14px 20px 0 !important; width:calc(100% - 40px) !important; box-sizing:border-box !important;
padding:14px 15px 14px !important; border-radius:22px !important;
background:linear-gradient(160deg,#2A1518 0%,#4A2530 100%) !important; border:0 !important;
box-shadow:0 18px 40px -22px rgba(42,21,24,.75) !important; color:#fff !important; text-align:left !important;
position:relative !important; overflow:hidden !important;
}
html body .stage .device .screen .refcard::after{
content:'' !important; position:absolute !important; right:-40px !important; top:-50px !important; width:160px !important; height:160px !important; border-radius:50% !important;
background:radial-gradient(circle,rgba(255,196,120,.35),rgba(255,196,120,0) 70%) !important; pointer-events:none !important;
}
html body .stage .device .screen .rc-top{ display:flex !important; align-items:center !important; gap:12px !important; position:relative !important; z-index:1 !important; }
html body .stage .device .screen .rc-ic{ flex:none !important; width:40px !important; height:40px !important; border-radius:14px !important; background:rgba(255,255,255,.12) !important; color:#FFD9A0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
html body .stage .device .screen .rc-m{ flex:1 !important; min-width:0 !important; }
html body .stage .device .screen .rc-t{ font:800 15px/1.2 'Unbounded','Manrope',system-ui,sans-serif !important; color:#fff !important; -webkit-text-fill-color:#fff !important; letter-spacing:-.01em !important; }
html body .stage .device .screen .rc-s{ font:500 12.5px/1.35 'Manrope',system-ui,sans-serif !important; color:rgba(255,255,255,.72) !important; margin-top:3px !important; }
html body .stage .device .screen .rc-cnt{ flex:none !important; min-width:30px !important; height:30px !important; padding:0 10px !important; border-radius:15px !important; background:#FFC978 !important; color:#2A1518 !important; -webkit-text-fill-color:#2A1518 !important; font:800 14px/30px 'Manrope',system-ui,sans-serif !important; text-align:center !important; }
html body .stage .device .screen .rc-terms{ display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin-top:12px !important; position:relative !important; z-index:1 !important; }
html body .stage .device .screen .rc-pill{ font:700 11.5px/1 'Manrope',system-ui,sans-serif !important; padding:7px 10px !important; border-radius:999px !important; background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.14) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; white-space:nowrap !important; }
html body .stage .device .screen .rc-row{ display:flex !important; gap:8px !important; margin-top:12px !important; position:relative !important; z-index:1 !important; }
html body .stage .device .screen .rc-share{
flex:1 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
height:44px !important; border-radius:14px !important; border:0 !important; cursor:pointer !important;
background:linear-gradient(120deg,#FFD9A0,#FFC061) !important; color:#2A1518 !important; -webkit-text-fill-color:#2A1518 !important;
font:800 13.5px/1 'Manrope',system-ui,sans-serif !important; box-shadow:0 12px 24px -14px rgba(255,192,97,.8) !important;
}
html body .stage .device .screen .rc-copy{
flex:none !important; height:44px !important; padding:0 14px !important; border-radius:14px !important; cursor:pointer !important;
border:1px solid rgba(255,255,255,.22) !important; background:rgba(255,255,255,.08) !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
font:700 13px/1 'Manrope',system-ui,sans-serif !important;
}
html body .stage .device .screen .rc-share:active, html body .stage .device .screen .rc-copy:active{ transform:scale(.97) !important; }
/* ---------- День рождения (этап 3, v946): строка в шапке профиля ---------- */
html body .stage .device .screen .pf-bday{
display:inline-flex !important; align-items:center !important; gap:6px !important; margin-top:8px !important;
appearance:none !important; -webkit-appearance:none !important; border:0 !important; cursor:pointer !important;
padding:7px 12px !important; border-radius:999px !important;
background:linear-gradient(120deg,#FFE3EC,#FFD1E1) !important; color:#8A2A5A !important;
font:700 12px/1 'Manrope',system-ui,sans-serif !important; text-align:left !important; max-width:100% !important; white-space:normal !important; line-height:1.2 !important;
}
html body .stage .device .screen .pf-bday.set{ background:var(--dd-card) !important; border:1px solid var(--dd-line) !important; color:var(--dd-ink) !important; }
html body .stage .device .screen .pf-bday:active{ transform:scale(.97) !important; }
/* ============================================================
v949: подарок на карте виден сразу · баннер «Вас ждёт напиток» · тост салюта в 2 строки
============================================================ */
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-pills .cc-gift,
html body .sheet .clubcard.clubcard.clubcard .cc-pills .cc-gift{
background:linear-gradient(120deg,#FFE29A 0%,#FFC978 45%,#FF9F5A 100%) !important;
color:#3A1408 !important; -webkit-text-fill-color:#3A1408 !important;
border:1px solid rgba(255,255,255,.55) !important;
box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 8px 18px -8px rgba(255,159,90,.85), 0 0 0 0 rgba(255,201,120,.65) !important;
font-size:12px !important; font-weight:800 !important; letter-spacing:.005em !important;
padding:7px 11px 7px 9px !important; gap:5px !important;
max-width:100% !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
animation:ddGiftGlow 2.4s ease-in-out infinite !important;
}
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-pills .cc-gift svg{ color:#7A1F4A !important; fill:#7A1F4A !important; width:12px !important; height:12px !important; }
@keyframes ddGiftGlow{
0%,100%{ box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 8px 18px -8px rgba(255,159,90,.85), 0 0 0 0 rgba(255,201,120,.65); }
50%{ box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 8px 18px -8px rgba(255,159,90,.85), 0 0 0 7px rgba(255,201,120,0); }
}
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-pills{ min-width:0 !important; }
html body .stage .device .screen .clubcard.clubcard.clubcard .cc-topbar{ overflow:hidden !important; }
html body .stage .device .screen .gift-cta{
display:flex !important; align-items:flex-start !important; gap:12px !important;
margin:12px 18px 0 !important; width:calc(100% - 36px) !important; box-sizing:border-box !important; padding:13px 14px !important; border-radius:18px !important;
background:linear-gradient(120deg,#FFF1D6 0%,#FFE3C2 100%) !important;
border:1px solid rgba(255,159,90,.35) !important;
box-shadow:0 14px 28px -20px rgba(180,90,20,.55) !important;
color:#3A1408 !important;
}
html body .stage .device .screen .gift-cta .gc-ic{
flex:none !important; width:40px !important; height:40px !important; border-radius:13px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
background:linear-gradient(135deg,#FFC978,#FF9F5A) !important; color:#3A1408 !important;
box-shadow:0 8px 16px -8px rgba(255,159,90,.9) !important;
animation:ddGiftBob 2.2s ease-in-out infinite !important;
}
@keyframes ddGiftBob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-2px) rotate(-4deg); } }
html body .stage .device .screen .gift-cta .gc-m{ min-width:0 !important; flex:1 1 auto !important; }
html body .stage .device .screen .gift-cta .gc-t{ font:800 15px/1.2 'Manrope',system-ui,sans-serif !important; color:#3A1408 !important; letter-spacing:-.01em !important; }
html body .stage .device .screen .gift-cta .gc-s{ margin-top:3px !important; font:600 12px/1.35 'Manrope',system-ui,sans-serif !important; color:#7A4A2A !important; }
html body .stage .device .screen .party-toast,
html body .stage .device .screen #dar-party-toast{
white-space:normal !important; max-width:min(86%,340px) !important; width:max-content !important;
font-size:14px !important; line-height:1.3 !important; padding:12px 18px !important;
}
/* Лента разделов живая, не «перекрасили кнопку»:
360мс ease-out + чипы выезжают с шагом 28мс. Слабые телефоны — без анимации. */
@keyframes dar-chip-in{
from{ opacity:0; transform:translateY(5px); }
to{ opacity:1; transform:none; }
}
html body .stage .device .screen .chips .chip,
html body .stage .device .screen .chipbar .chip{
animation:dar-chip-in .34s cubic-bezier(.16,1,.3,1) both;
}
html body .stage .device .screen .chips .chip:nth-child(1){ animation-delay:0ms; }
html body .stage .device .screen .chips .chip:nth-child(2){ animation-delay:28ms; }
html body .stage .device .screen .chips .chip:nth-child(3){ animation-delay:56ms; }
html body .stage .device .screen .chips .chip:nth-child(4){ animation-delay:84ms; }
html body .stage .device .screen .chips .chip:nth-child(5){ animation-delay:112ms; }
html body .stage .device .screen .chips .chip:nth-child(6){ animation-delay:140ms; }
html body .stage .device .screen .chips .chip:nth-child(7){ animation-delay:168ms; }
html body .stage .device .screen .chips .chip:nth-child(8){ animation-delay:196ms; }
html body .stage .device .screen .chips .chip:nth-child(9){ animation-delay:224ms; }
html body .stage .device .screen .chips .chip:nth-child(10){ animation-delay:252ms; }
html body .stage .device .screen .chips .chip:nth-child(n+11){ animation-delay:280ms; }
html body .stage .device .screen .modes .mthumb,
html body .stage .device .screen .modes.modes3 .mthumb,
html body .stage .device .screen .modes.modes3 .mthumb.m3{
transition:left .38s cubic-bezier(.16,1,.3,1), right .38s cubic-bezier(.16,1,.3,1), transform .38s cubic-bezier(.16,1,.3,1), width .38s cubic-bezier(.16,1,.3,1), background .36s ease !important;
}
html.dc-lite .stage .device .screen .chips .chip,
html.dc-honor .stage .device .screen .chips .chip,
html.dc-lite .stage .device .screen .chipbar .chip,
html.dc-honor .stage .device .screen .chipbar .chip{
animation:none !important;
transition:background .15s ease, color .15s ease !important;
}
html.dc-lite .stage .device .screen .modes .mthumb,
html.dc-honor .stage .device .screen .modes .mthumb{
transition:left .2s ease, right .2s ease, transform .2s ease !important;
}
@media (prefers-reduced-motion:reduce){
html body .stage .device .screen .chips .chip,
html body .stage .device .screen .chipbar .chip,
html body .stage .device .screen .modes .mthumb{
animation:none !important;
transition:none !important;
}
}
/* Открытия / закрытия / переходы — то же окно, что в разборе Renzo:
панель 300–450мс, закрытие 300мс, ease-out, строки с шагом 28мс.
Honor и reduced-motion — без анимации. Android lite: панель есть, stagger нет. */
@keyframes dar-panel-in{
from{ opacity:0; transform:translate3d(0,16px,0); }
to{ opacity:1; transform:none; }
}
@keyframes dar-panel-out{
from{ opacity:1; transform:none; }
to{ opacity:0; transform:translate3d(0,12px,0); }
}
@keyframes dar-scrim-in{
from{ opacity:0; }
to{ opacity:1; }
}
@keyframes dar-scrim-out{
from{ opacity:1; }
to{ opacity:0; }
}
@keyframes dar-row-in{
from{ opacity:0; transform:translateY(8px); }
to{ opacity:1; transform:none; }
}
@keyframes dar-view-in{
from{ opacity:.35; transform:translateY(8px); }
to{ opacity:1; transform:none; }
}
html:not(.dc-honor) body .sheet,
html:not(.dc-honor) body .sheet.sheet-cust,
html:not(.dc-honor) body .sheet.sheet-checkout,
html:not(.dc-honor) body .sheet.sheet-vit,
html:not(.dc-honor) body .sheet.sheet-rate,
html:not(.dc-honor) body .sheet.sheet-beans,
html:not(.dc-honor) body .ord-ticket,
html:not(.dc-honor) body .modal{
animation:dar-panel-in 380ms cubic-bezier(.16,1,.3,1) both !important;
}
html:not(.dc-honor) body .scrim,
html:not(.dc-honor) body .scrim.scrim-tk{
animation:dar-scrim-in 320ms ease-out both !important;
}
html:not(.dc-honor) body .authwrap{
animation:dar-panel-in 360ms cubic-bezier(.16,1,.3,1) both !important;
}
html:not(.dc-honor) body .scanfull,
html:not(.dc-honor) body .nbanner,
html:not(.dc-honor) body .smsban{
animation:dar-panel-in 340ms cubic-bezier(.16,1,.3,1) both !important;
}
html:not(.dc-honor) body .view.dar-view-in{
animation:dar-view-in 360ms cubic-bezier(.16,1,.3,1) both;
}
html:not(.dc-honor) body .tab{
transition:background 360ms cubic-bezier(.16,1,.3,1), color 360ms cubic-bezier(.16,1,.3,1), transform 320ms cubic-bezier(.16,1,.3,1) !important;
}
html:not(.dc-honor) body .sheet.dar-leave,
html:not(.dc-honor) body .ord-ticket.dar-leave,
html:not(.dc-honor) body .modal.dar-leave,
html:not(.dc-honor) body .nbanner.dar-leave{
animation:dar-panel-out 300ms cubic-bezier(.4,0,.2,1) both !important;
pointer-events:none !important;
}
html:not(.dc-honor) body .scrim.dar-leave{
animation:dar-scrim-out 300ms ease-in both !important;
pointer-events:none !important;
}
html:not(.dc-lite):not(.dc-honor) body .items .item,
html:not(.dc-lite):not(.dc-honor) body .menusec .item{
animation:dar-row-in 340ms cubic-bezier(.16,1,.3,1) both;
}
html:not(.dc-lite):not(.dc-honor) body .items .item:nth-child(1),
html:not(.dc-lite):not(.dc-honor) body .menusec .item:nth-child(1){ animation-delay:0ms; }
html:not(.dc-lite):not(.dc-honor) body .items .item:nth-child(2),
html:not(.dc-lite):not(.dc-honor) body .menusec .item:nth-child(2){ animation-delay:28ms; }
html:not(.dc-lite):not(.dc-honor) body .items .item:nth-child(3),
html:not(.dc-lite):not(.dc-honor) body .menusec .item:nth-child(3){ animation-delay:56ms; }
html:not(.dc-lite):not(.dc-honor) body .items .item:nth-child(4),
html:not(.dc-lite):not(.dc-honor) body .menusec .item:nth-child(4){ animation-delay:84ms; }
html:not(.dc-lite):not(.dc-honor) body .items .item:nth-child(5),
html:not(.dc-lite):not(.dc-honor) body .menusec .item:nth-child(5){ animation-delay:112ms; }
html:not(.dc-lite):not(.dc-honor) body .items .item:nth-child(6),
html:not(.dc-lite):not(.dc-honor) body .menusec .item:nth-child(6){ animation-delay:140ms; }
html:not(.dc-lite):not(.dc-honor) body .items .item:nth-child(7),
html:not(.dc-lite):not(.dc-honor) body .menusec .item:nth-child(7){ animation-delay:168ms; }
html:not(.dc-lite):not(.dc-honor) body .items .item:nth-child(8),
html:not(.dc-lite):not(.dc-honor) body .menusec .item:nth-child(8){ animation-delay:196ms; }
html:not(.dc-lite):not(.dc-honor) body .items .item:nth-child(n+9),
html:not(.dc-lite):not(.dc-honor) body .menusec .item:nth-child(n+9){ animation-delay:224ms; }
html:not(.dc-lite):not(.dc-honor) body .sheet .cro-block,
html:not(.dc-lite):not(.dc-honor) body .sheet .crow,
html:not(.dc-lite):not(.dc-honor) body .sheet .howrow,
html:not(.dc-lite):not(.dc-honor) body .sheet .pkitem,
html:not(.dc-lite):not(.dc-honor) body .ord-ticket .tk-head,
html:not(.dc-lite):not(.dc-honor) body .ordcard{
animation:dar-row-in 340ms cubic-bezier(.16,1,.3,1) both;
}
html:not(.dc-lite):not(.dc-honor) body .sheet .cro-block:nth-child(1),
html:not(.dc-lite):not(.dc-honor) body .sheet .crow:nth-child(1),
html:not(.dc-lite):not(.dc-honor) body .sheet .howrow:nth-child(1){ animation-delay:0ms; }
html:not(.dc-lite):not(.dc-honor) body .sheet .cro-block:nth-child(2),
html:not(.dc-lite):not(.dc-honor) body .sheet .crow:nth-child(2),
html:not(.dc-lite):not(.dc-honor) body .sheet .howrow:nth-child(2){ animation-delay:28ms; }
html:not(.dc-lite):not(.dc-honor) body .sheet .cro-block:nth-child(3),
html:not(.dc-lite):not(.dc-honor) body .sheet .crow:nth-child(3),
html:not(.dc-lite):not(.dc-honor) body .sheet .howrow:nth-child(3){ animation-delay:56ms; }
html:not(.dc-lite):not(.dc-honor) body .sheet .cro-block:nth-child(4),
html:not(.dc-lite):not(.dc-honor) body .sheet .crow:nth-child(4),
html:not(.dc-lite):not(.dc-honor) body .sheet .howrow:nth-child(4){ animation-delay:84ms; }
html:not(.dc-lite):not(.dc-honor) body .sheet .cro-block:nth-child(5),
html:not(.dc-lite):not(.dc-honor) body .sheet .crow:nth-child(5),
html:not(.dc-lite):not(.dc-honor) body .sheet .howrow:nth-child(5){ animation-delay:112ms; }
html:not(.dc-lite):not(.dc-honor) body .sheet .cro-block:nth-child(6),
html:not(.dc-lite):not(.dc-honor) body .sheet .crow:nth-child(6),
html:not(.dc-lite):not(.dc-honor) body .sheet .howrow:nth-child(6){ animation-delay:140ms; }
html:not(.dc-lite):not(.dc-honor) body .sheet .cro-block:nth-child(n+7),
html:not(.dc-lite):not(.dc-honor) body .sheet .crow:nth-child(n+7),
html:not(.dc-lite):not(.dc-honor) body .sheet .howrow:nth-child(n+7){ animation-delay:168ms; }
html.dc-honor body .sheet,
html.dc-honor body .scrim,
html.dc-honor body .ord-ticket,
html.dc-honor body .modal,
html.dc-honor body .authwrap,
html.dc-honor body .scanfull,
html.dc-honor body .nbanner,
html.dc-honor body .view.dar-view-in,
html.dc-honor body .items .item,
html.dc-honor body .menusec .item{
animation:none !important;
}
html.dc-lite body .items .item,
html.dc-lite body .menusec .item,
html.dc-lite body .sheet .cro-block,
html.dc-lite body .sheet .crow,
html.dc-lite body .sheet .howrow,
html.dc-lite body .ordcard{
animation:none !important;
}
@media (prefers-reduced-motion:reduce){
html body .sheet,
html body .scrim,
html body .ord-ticket,
html body .modal,
html body .authwrap,
html body .scanfull,
html body .nbanner,
html body .view.dar-view-in,
html body .items .item,
html body .menusec .item,
html body .sheet .cro-block,
html body .sheet .crow,
html body .tab{
animation:none !important;
transition:none !important;
}
}