/* Стили страницы сканера — перенесены из прототипа Claude Design «Своё Вино — сканер»
   (<style> в «Scanner Desktop.html») как есть. Сняты два правила, нужные только
   превью в Claude Design: `body { min-width: 1200px }` (давал горизонтальную прокрутку
   на планшете) и `html.m body { max-width: 390px; box-shadow … }` (рамка «телефона»
   на экране компьютера). Мобильная раскладка — правила `html.m …`; класс `m` ставит
   app.js по ширине экрана ≤600. */
body{margin:0;background:var(--surface-page)}

a{color:var(--fg-accent)}a:hover{color:var(--wine-600)}
.app{min-height:100vh;display:flex;flex-direction:column;position:relative}
.app main{flex:1}
.age-gate-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(35,33,32,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow-y:auto}
.age-gate{width:min(808px,100%);padding:48px 66px 54px;border-radius:44px;background:var(--white);box-shadow:0 24px 90px rgba(22,18,18,.16);text-align:center}
.age-gate h2{margin:0;font:500 56px/1.2 var(--font-display);color:var(--fg-1)}
.age-gate-content{display:flex;align-items:center;justify-content:center;gap:16px;min-height:190px;margin:16px 0 20px}
.age-gate-mascot{flex:0 0 170px;line-height:0}
.age-gate-content p{max-width:500px;margin:0;font:400 20px/1.55 var(--font-sans);color:var(--fg-strong);text-wrap:pretty}
.age-gate-content p span{color:var(--wine-700)}
.age-gate-confirm{display:block;width:100%;min-height:78px;padding:16px 24px;border-radius:20px;background:var(--wine-700);color:var(--white);font:600 22px/1.3 var(--font-sans);transition:background .18s ease}
.age-gate-confirm:hover{background:var(--wine-800)}
@media (max-width:600px){
  .age-gate-backdrop{padding:16px}
  .age-gate{padding:28px 24px 30px;border-radius:28px}
  .age-gate h2{font-size:46px}
  .age-gate-content{flex-direction:column;gap:4px;margin:4px 0 22px}
  .age-gate-mascot{flex:none;height:155px;transform:scale(.72);transform-origin:center top}
  .age-gate-content p{font-size:16px;line-height:1.5}
  .age-gate-confirm{min-height:60px;border-radius:14px;font-size:18px}
}
.scan-hero .frame{display:none}
@media (min-width:900px){
.scan-hero{padding:24px 0 40px!important;align-items:stretch!important;min-height:calc(100vh - var(--header-height) - 150px)}
.scan-hero .col{justify-content:center}
.scan-hero .frame-col{display:flex}
.scan-hero .frame-col>div{flex:1}
.tupaya-slot{min-height:340px!important}
}
@media (min-width:900px){.scan-hero .frame-col{padding-left:0}}
#screen .feed ol{max-width:calc(100% - 200px);height:400px;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 8px;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--white);scrollbar-width:none;-ms-overflow-style:none}
#screen .feed ol::-webkit-scrollbar{display:none}
#screen .feed li:last-child{border-bottom:0}
/* Так же место под ходока в карточке ответа и в блоке помощи: на десктопе он стоит у их
   правого края (at: result, similar, help), а строки шли на всю ширину и уходили под него —
   длинное «Прочитано с этикетки» закрывалось фигурой. Блок помощи шире, чтобы текст не сжался.
   На телефоне ходок снаружи — сброс ниже, в html.m. */
#screen .result>dl{max-width:calc(100% - 200px)}
.scan-help{max-width:840px!important;padding-right:200px!important}
html.m #screen .result>dl{max-width:none}
#screen .result{position:relative}
@media (max-width:899px){:root{--frame-pad:0px}}
.drop{position:fixed;inset:0;z-index:50;background:rgba(249,241,241,.92);border:3px dashed var(--wine-700);display:flex;align-items:center;justify-content:center;font:400 40px/1.2 var(--font-display);color:var(--wine-700);pointer-events:none}
.x-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:var(--ink-950);color:var(--fg-inverse);padding:12px 20px;border-radius:var(--radius-md);font:14px var(--font-sans);box-shadow:var(--shadow-2);z-index:60}
@keyframes tpy-pop{0%{opacity:0;transform:translateY(14px) scale(.92)}100%{opacity:1;transform:none}}
/* Облачко реплики ставится на место своим transform (translate(-50%,-100%) и т.п.).
   Анимация transform его перебивала: пока облачко проявлялось, оно стояло несдвинутым
   и торчало за край окна — страница на полсекунды становилась шире экрана.
   Отдельное свойство translate складывается с transform, а не заменяет его. */
@keyframes tpy-fade{from{opacity:0;translate:0 4px}to{opacity:1}}
.res-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.res-grid.has-img{grid-template-columns:220px minmax(0,1fr)}
.res-img{margin-top:40px}
html.m{--layout-margin:20px}
html.m .res-grid.has-img{grid-template-columns:minmax(0,1fr);gap:0}
html.m .res-img{margin-top:24px;width:140px;justify-self:start}
html.m #screen{padding-bottom:48px!important}
html.m #screen .feed ol{max-width:none!important;height:clamp(220px,38vh,320px)}
html.m #screen .feed{min-height:0!important}
html.m #screen .acts{flex-wrap:wrap}
html.m #screen .acts>*{flex:1 1 auto}
html.m .scan-help{padding:20px!important;margin-top:28px!important}
html.m .scan-help .btn,html.m .scan-help button{flex:1 1 100%}
html.m .scan-hero{display:flex!important;flex-direction:column;gap:20px!important;padding:16px 0 28px!important;min-height:0!important}
html.m .scan-hero .col{display:contents}
html.m .scan-hero h1{order:1;font-size:34px!important}
html.m .scan-hero p.lead{order:2}
html.m .scan-hero .frame-col{order:3}
html.m .scan-hero .scan-actions{order:4;flex-direction:column;align-items:stretch}
html.m .scan-hero .scan-actions>*{width:100%;justify-content:center}
html.m .scan-hero .meta{order:5}
html.m .scan-hero .col>p:not(.lead){order:6}
html.m .tupaya-demo{order:7;margin-top:-8px!important}
html.m .tupaya-slot{min-height:220px!important}
html.m .drop{font-size:26px}
html.m .scan-hero h1{font-size:30px!important;line-height:1.1}
html.m .scan-hero p.lead{font-size:16px}
html.m .scan-hero{gap:14px!important;padding:12px 0 20px!important}
html.m .scan-hero .frame-col{width:100%;min-width:0}
html.m .scan-hero ~ *, html.m .crumbs{display:none}
html.m .tupaya-card{width:100%;box-sizing:border-box;display:grid!important;grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto auto;gap:10px 12px!important;padding:14px 14px 0!important;flex:none!important}
html.m .tupaya-card-head{grid-column:1 / -1}
html.m .tupaya-bubble{grid-column:2;grid-row:2;align-self:start;padding:12px 14px!important;margin-bottom:14px}
html.m .tupaya-slot{grid-column:1;grid-row:2;min-height:130px!important}
html.m .tupaya-slot span{display:none}
html.m .tupaya-tail{left:-7px!important;bottom:auto!important;top:22px;margin:0!important;width:14px!important;height:14px!important}
html.m .tupaya-line{font:500 15px/1.4 var(--font-sans)!important;min-height:0!important}
html.m .tupaya-card-head .eyebrow{font-size:11px}
html.m .scan-hero .col>p:not(.lead){min-height:0!important;margin:0}
html.m .scan-hero .col>p:not(.lead):empty{display:none}
html.m .tupaya-bubble>div{flex-wrap:wrap;gap:4px 12px!important;margin-top:10px!important}
html.m .tupaya-bubble .btn{padding-inline:12px}
html.m #screen{display:flex;flex-direction:column}
html.m #screen>h1{order:0;font-size:24px!important;margin-bottom:12px!important}
html.m #screen>.res-grid{order:1}
html.m #screen>.clock{order:2}
html.m #screen>.acts{order:3}
html.m #screen>.cols{order:1}
html.m #screen>.scan-help{order:5}
html.m #screen .cols{grid-template-columns:88px minmax(0,1fr)!important;gap:14px!important}
html.m #screen .shot img{height:118px!important;border-radius:var(--radius-sm)}
html.m #screen .shot figcaption{display:none}
html.m #screen .cols .shot{padding-bottom:150px}
html.m #screen .feed h2{margin-top:0}
html.m #screen .feed li{padding:5px 0;font-size:14px}
html.m #screen .feed li i{flex-basis:48px}
html.m #screen .acts>*{flex:0 1 auto}
html.m #screen .clock{margin-top:12px!important}
html.m .res-grid.has-img{grid-template-columns:96px minmax(0,1fr)!important;gap:14px!important}
html.m .res-grid.has-img>div{grid-column:1 / -1}
html.m .res-img{width:auto!important;margin-top:0!important}
html.m #screen .result{margin-top:0!important;padding:16px!important}
html.m #screen .result dl{grid-template-columns:1fr!important;gap:2px 0!important}
html.m #screen .result dt{margin-top:6px}
html.m .site-header .site-nav,html.m .site-header .scan-pill{display:none}
html.m .site-header .wrap{gap:12px;justify-content:space-between}
html.m .site-header .wordmark img{width:128px;height:auto}
html.m .site-header .header-right .btn,html.m .site-header .header-right a:last-child{padding-inline:12px;font-size:14px}
html.m .res-img{width:96px}
html.m .tupaya-line{font-size:20px!important}