/* Токены S02 (openspec/changes/implement-ios-mockup-v2): молочный фон, чернильный текст, лайм на действиях, статусы рамок. */
:root{--paper:#fbfaf6;--page:#eeece6;--ink:#30263e;--muted:#746d78;--line:#ded9d1;--lime:#dff477;--soft:#efede7;--ok:#71861b;--review:#e7ae55;--danger:#8d3348;--shadow:0 18px 55px rgba(48,38,62,.12);color-scheme:light}
*{box-sizing:border-box}
html{background:var(--page);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
body{margin:0;min-width:300px;background:var(--page);color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:16px}
button{min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 120ms ease,background-color 120ms ease,opacity 120ms ease}
button:active:not(:disabled){transform:scale(.985)}
button:disabled{cursor:default;opacity:.45}
button:focus-visible,input:focus-visible,select:focus-visible,label:focus-within,[tabindex="-1"]:focus-visible{outline:3px solid #82981d;outline-offset:2px}
[tabindex="-1"]:focus:not(:focus-visible){outline:none}
.brandbar{display:flex;align-items:center;gap:9px;padding:calc(14px + env(safe-area-inset-top)) 18px 4px;font-size:13px;font-weight:850}
h1{margin-bottom:8px;font-size:30px;line-height:1.08;letter-spacing:-.035em}
.rate-action{border:0;background:transparent;padding:7px 9px;color:#554568;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.app-shell{width:min(100%,430px);min-height:100vh;margin:0 auto;background:var(--paper);box-shadow:var(--shadow);position:relative}
.brandmark{width:36px;height:36px;border-radius:11px}
.app-main{padding:16px 20px calc(96px + env(safe-area-inset-bottom))}
.eyebrow{margin:0 0 7px;color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
h2{font-size:25px;line-height:1.08;letter-spacing:-.025em}
.simple-head{margin-bottom:16px}
.photo-missing{display:grid;place-items:center;align-content:center;gap:3px;border-radius:14px;background:var(--soft);color:var(--muted)}
.photo-missing svg{width:31px;height:49px;fill:none;stroke:currentColor;stroke-width:2}
.photo-missing small{font-size:8px;text-align:center}
.icon-button{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent}
.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.icon-button[aria-pressed=true] svg{fill:var(--lime);stroke:var(--ink)}
.empty{padding:44px 14px;color:var(--muted);text-align:center;line-height:1.5}
.storage-note{border-radius:14px;background:#f4dfdf;padding:12px;color:var(--danger);font-size:12px}
.back{margin:-8px 0 12px;border:0;background:transparent;padding:4px 0;font-weight:800}
.beer-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.beer-card>header h1{font-size:30px}
.beer-card>header p:last-child{color:var(--muted);font-size:14px}
.taste{margin:6px 0 0}
.taste svg{width:100%;display:block;overflow:visible}
.taste text{fill:var(--ink);font-size:14px;font-weight:720}
.radar-grid,.radar-axis{fill:none;stroke:#d7d1da;stroke-width:1}
.radar-profile{fill:rgba(220,245,120,.65);stroke:var(--ink);stroke-width:2}
.taste figcaption{margin:-2px 8px 0;color:var(--muted);font-size:11px}
.story{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.story h2{font-size:27px}
.story p:not(.eyebrow){font-size:15px;line-height:1.58}
.modal-backdrop{position:fixed;z-index:80;inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(35,27,43,.46)}
.rating-sheet{width:min(100%,430px);border-radius:25px 25px 0 0;background:var(--paper);padding:24px 18px max(22px,env(safe-area-inset-bottom));box-shadow:0 -18px 50px rgba(20,14,25,.2)}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modal-actions button{border:1px solid var(--line);border-radius:13px;background:#fff;font-weight:750}
.loading-shell,.load-error{display:grid;place-items:center;padding:30px;text-align:center}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:500px){.app-shell{box-shadow:none}.app-main{padding-left:16px;padding-right:16px}}
@media(max-width:340px){.app-main{padding-left:14px;padding-right:14px}.taste text{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}button:active:not(:disabled){transform:none}}
.image-well img{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;transform:scale(var(--image-scale,1))}
.taste-unknown .radar-grid{stroke-dasharray:4 4}.taste-unknown figcaption{font-style:italic}
.image-well{display:grid;place-items:center;border-radius:14px;background:var(--paper);overflow:hidden}.image-well img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 7px rgba(48,38,62,.14))}.image-well img.image-multiply{mix-blend-mode:multiply}.card-photo img{filter:drop-shadow(0 10px 9px rgba(48,38,62,.13))}
.brandbar>span{flex:1}
/* Четыре вкладки S01: равные кнопки, подписи 11 px, активная иконка залита лаймом. */
.bottom-nav{position:fixed;z-index:35;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,430px);min-height:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:2px;padding:6px 6px max(8px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(251,250,246,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.bottom-nav button{min-width:44px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 2px;border:0;border-radius:13px;background:transparent;color:var(--muted);font-size:11px;font-weight:700;line-height:1.1}
.bottom-nav button>svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav button[aria-current=page]{color:var(--ink);font-weight:850}
.bottom-nav button[aria-current=page]>svg{fill:var(--lime);stroke:var(--ink)}
.learning-error{padding:28px 0}
.learning-error p{line-height:1.5}
.learning-about [data-close-about]{position:absolute;right:18px;top:18px;width:44px;height:44px;border:0;border-radius:50%;background:var(--soft);font-size:24px}
@media(max-width:340px){.app-main.learning{padding-left:14px;padding-right:14px}}
.my-row{width:100%;min-height:58px;border:0;border-bottom:1px solid var(--line);background:transparent;display:flex;align-items:center;justify-content:space-between;text-align:left}.my-row strong{padding-right:12px}

.card-note{margin:14px 0 0;padding:11px 13px;border-radius:14px;background:var(--soft);color:var(--muted);font-size:12px;line-height:1.4}

/* Предсказанный вкус: пунктирный прогноз и тонкий контур личного уточнения поверх схемы стиля. */
:root{--lime-ink:#728a12}
.radar-prediction{fill:none;stroke:var(--lime-ink);stroke-width:2;stroke-dasharray:6 5;stroke-linejoin:round}
.radar-personal{fill:none;stroke:var(--ink);stroke-width:1;stroke-linejoin:round}
.radar-legend{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0 8px;color:var(--muted);font-size:11px;font-weight:800}
.radar-legend__item--prediction{color:var(--lime-ink);letter-spacing:.06em}
.radar-legend__item--personal{color:var(--ink)}
.taste-refine{display:block;margin:10px auto 0;border:1px solid var(--line);border-radius:13px;background:#fff;padding:0 16px;font-size:13px;font-weight:800}
.taste-sheet__note{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.4}
.taste-sliders{display:grid;gap:4px;margin:16px 0 18px}
.taste-slider{display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-areas:"name value" "range range";align-items:center;gap:0 8px;min-height:44px;font-size:12px}
.taste-slider>span{grid-area:name;color:var(--muted);font-weight:800}
.taste-slider>output{grid-area:value;text-align:right;font-size:14px;font-weight:850}
.taste-slider>input{grid-area:range;width:100%;height:44px;min-height:44px;margin:0;accent-color:var(--lime-ink);background:transparent}
.modal-actions [data-save-taste]{background:var(--lime);border-color:var(--lime)}
.modal-actions [data-reset-taste]{grid-column:1/-1;color:var(--danger)}

/* === Знакомство и «Моё» (openspec/changes/friend-feedback-round-1) === */
.my-section{margin-top:22px}
.my-section__title{margin-bottom:6px;font-size:19px;letter-spacing:-.01em}
.my-hint{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.my-onboarding{padding-top:18px;border-top:1px solid var(--line)}
.my-onboarding__open{min-height:48px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:0 16px;font-size:14px;font-weight:800}
.my-onboarding__choice{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.my-onboarding__choice button{min-height:44px;border:1px solid var(--ink);border-radius:999px;background:transparent;padding:0 14px;font-size:13px;font-weight:800}

/* Вариант A: карточки на весь экран. */
.onb--cards{position:fixed;z-index:90;inset:0;width:min(100%,430px);margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;gap:12px;background:var(--paper);padding:26px 18px max(20px,env(safe-area-inset-bottom));overflow-y:auto}
.onb-card{animation:onb-in .22s ease-out}
.onb-card h2{margin-bottom:8px;font-size:29px}
.onb-text{margin:0;font-size:15px;line-height:1.5}
.onb-art{margin-top:16px}
.onb-art--shelf{position:relative;border-radius:20px;overflow:hidden;background:var(--soft)}
.onb-art--shelf img{display:block;width:100%;height:auto}
.onb-boxes{position:absolute;inset:0;display:block}
.onb-box{position:absolute;border:2px solid var(--lime);border-radius:9px;background:rgba(220,245,120,.16)}
.onb-mock-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:12px 14px}
.onb-mock-copy{min-width:0}
.onb-mock-copy strong{display:block;font-size:15px;line-height:1.2}
.onb-mock-copy small{display:block;margin-top:4px;color:var(--muted);font-size:11px}
.onb-mock-score{text-align:right}
.onb-mock-score b{display:block;font-size:17px}
.onb-mock-score small{display:block;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}
.onb-mock-link{color:#554568;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.onb-radar{display:block;width:150px;max-width:55%;margin:10px auto 0}
.onb-mock-sheet{margin-top:10px;border-radius:20px 20px 16px 16px;background:var(--soft);padding:14px}
.onb-mock-sheet strong{display:block;font-size:16px}
.onb-mock-stars{display:block;margin-top:8px;color:#82981d;font-size:26px;letter-spacing:3px}
.onb-mock-save{display:block;margin-top:10px;border-radius:12px;background:var(--lime);padding:9px;color:var(--ink);font-size:13px;font-weight:800;text-align:center}
.onb-note{margin:8px 0 0;color:var(--muted);font-size:11px}
.onb-dots{display:flex;gap:6px}
.onb-dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.onb-dot.is-active{background:var(--ink)}
.onb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.onb-buttons{display:flex;align-items:center;gap:6px}
.onb-skip{min-height:44px;border:0;background:transparent;padding:0 10px;color:var(--muted);font-size:13px;font-weight:800}
.onb-next{min-height:48px;min-width:112px;border:0;border-radius:999px;background:var(--lime);padding:0 20px;font-size:15px;font-weight:850}
.onb-step{color:var(--muted);font-size:12px;font-weight:800}

/* Вариант B: подсказки поверх настоящего экрана, вырез по положению кнопки. */
.onb--tour{position:fixed;z-index:90;inset:0}
.onb-ring{position:fixed;display:block;border:2px solid var(--lime);border-radius:16px;box-shadow:0 0 0 9999px rgba(48,38,62,.74);pointer-events:none}
.onb-tip{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);width:min(calc(100% - 28px),372px);border-radius:18px;background:var(--paper);padding:14px 16px 12px;box-shadow:var(--shadow);animation:onb-fade .2s ease-out}
.onb-tip .onb-text{font-size:14px}
.onb-tip .onb-foot{margin-top:10px}
.onb-tip__arrow{position:absolute;left:50%;width:14px;height:14px;margin-left:-7px;background:var(--paper);transform:rotate(45deg)}
.onb-tip[data-onb-side=above] .onb-tip__arrow{bottom:-6px}
.onb-tip[data-onb-side=below] .onb-tip__arrow{top:-6px}
@keyframes onb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes onb-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.onb-card,.onb-tip{animation:none}}
@media(max-width:340px){.onb--cards{padding:20px 14px max(16px,env(safe-area-inset-bottom))}.onb-card h2{font-size:26px}.onb-next{min-width:96px;padding:0 14px}}

/* === Скан v2: один вход, проверка кадра, результаты и уточнение (openspec/changes/implement-ios-mockup-v2, S02–S06, S11) === */
.scan-screen{display:grid;gap:12px;min-width:0}
.scan-screen>h1{margin:0}
.scan-screen .back{margin:-6px 0 0;justify-self:start;min-height:44px}
.scan-entry .camera-lead,.scan-lead{margin:0;color:var(--muted);font-size:16px;line-height:1.45}
.scan-art{display:block;width:100%;height:auto;border-radius:26px}
.scan-tip,.scan-help{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.scan-denied{padding:14px 16px;border-radius:16px;background:#f7e6c7}
.scan-denied h2{margin:0 0 4px;font-size:20px}
.scan-actions{display:grid;gap:8px}
.scan-actions--paired{grid-template-columns:repeat(auto-fit,minmax(min(100%,136px),1fr))}
.btn{display:grid;place-items:center;width:100%;min-height:48px;padding:6px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);font-size:15px;font-weight:800;line-height:1.2;text-align:center}
.btn--primary{border-color:var(--lime);background:var(--lime)}
.pill{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px;font-weight:750;line-height:1.2}
.pill--square{min-width:44px;padding:0 10px}
.pill--accent{border-color:var(--lime);background:var(--lime)}
.text-button{min-height:44px;padding:0 6px;border:0;background:transparent;font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.chip{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:14px;font-weight:750;font-variant-numeric:tabular-nums}
.chip[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.chip.is-dim{opacity:.4}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
/* Фото: canvas = фактический прямоугольник изображения (contain), рамки внутри него в долях. */
.scan-stage{position:relative;width:100%;max-height:62vh;overflow:hidden;border-radius:22px;background:#8d8173}
.scan-stage.is-zoomed{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.scan-canvas{position:absolute;left:0;top:0;width:100%;height:100%}
.scan-canvas.is-adding{touch-action:none;cursor:crosshair}
.scan-photo{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.scan-photo--missing{display:grid;place-items:center;color:#fff;font-size:13px}
.scan-preview{overflow:hidden;border-radius:22px;background:#8d8173}
.scan-preview .scan-photo{max-height:56vh}
.scan-preview--small .scan-photo{max-height:30vh}
.scan-box{position:absolute;min-width:0;min-height:0;margin:0;padding:0;border:2px solid rgba(48,38,62,.8);border-radius:8px;background:transparent;transition:opacity 150ms ease,box-shadow 150ms ease}
.scan-box:active:not(:disabled){transform:none}
.scan-box__tag{position:absolute;top:2px;left:2px;min-width:22px;height:22px;padding:0 5px;display:grid;place-items:center;border-radius:7px;background:#fff;color:var(--ink);font-size:12px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.scan-box--ok{border-color:var(--ok)}
.scan-box--ok .scan-box__tag{background:var(--ok);color:#fff}
.scan-box--review{border-color:var(--review);border-style:dashed}
.scan-box--review .scan-box__tag{background:var(--review);color:var(--ink)}
.scan-box--manual{border-color:var(--ink)}
.scan-box--manual .scan-box__tag{background:var(--ink);color:#fff}
.scan-box--pending{border-color:#fff;border-style:dotted}
.scan-box.is-dim{opacity:.28}
.scan-box.is-selected{opacity:1;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.is-adding .scan-box{pointer-events:none;opacity:.5}
.scan-draft{position:absolute;border:2px dashed var(--ink);border-radius:8px;background:rgba(223,244,119,.3);box-shadow:0 0 0 2px var(--lime);pointer-events:none}
.scan-zoom{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:-4px}
.scan-zoom__value{min-width:28px;text-align:center;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.scan-status{margin:0;font-size:18px;font-weight:800}
.scan-note{margin:0;color:var(--muted);font-size:13px;line-height:1.4}
.scan-scene{padding:10px 14px;border-radius:16px;background:#f2eadc}
.scan-scene p{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0;font-size:15px;font-weight:750}
.scan-scene__options{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.scan-notice{padding:11px 13px;border-radius:14px;background:var(--soft);font-size:14px;line-height:1.4}
.scan-notice p{margin:0}
.scan-notice--warn{background:#f7e6c7}
.scan-notice--error{background:#f4dfdf;color:var(--danger)}
.scan-notice--ok{background:#eef5cf}
.scan-notice__actions{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:2px}
.scan-edit{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.scan-edit__selected{margin:0;font-weight:800;font-variant-numeric:tabular-nums}
.scan-draft-tools{display:grid;gap:10px}
.scan-nudge{display:flex;flex-wrap:wrap;gap:6px}
.scan-lines{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.scan-lines li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;min-height:52px;padding:4px 0;border-bottom:1px solid var(--line)}
.scan-lines__text{min-width:0;font-size:15px;overflow-wrap:anywhere}
.scan-lines__text small{color:var(--muted);font-size:13px}
.scan-line-form{display:grid;gap:8px}
.scan-line-form label{color:var(--muted);font-size:13px;font-weight:800}
.scan-line-form input,.scan-search input{width:100%;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:15px;background:#fff;font-size:16px}
.scan-head{display:grid;gap:2px}
.scan-summary{margin:0;color:var(--muted);font-size:13px;font-weight:750;font-variant-numeric:tabular-nums}
.scan-body{display:grid;gap:12px;min-width:0}
.scan-tools{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.seg{display:inline-flex;max-width:100%;gap:3px;padding:3px;border-radius:999px;background:var(--soft)}
.seg button{min-height:44px;padding:0 13px;border:0;border-radius:999px;background:transparent;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.seg button[aria-selected=true]{background:#fff;box-shadow:0 2px 8px rgba(48,38,62,.12)}
.scan-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.scan-row{padding:8px 0;border-bottom:1px solid var(--line)}
.scan-row.is-selected{background:linear-gradient(90deg,rgba(223,244,119,.3),transparent 70%)}
.scan-row__main{width:100%;min-height:72px;display:grid;grid-template-columns:auto 48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:0;border:0;border-radius:12px;background:transparent;text-align:left}
.scan-row__num{min-width:34px;font-size:13px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.scan-thumb{display:grid;place-items:center;width:48px;height:64px;overflow:hidden;border-radius:10px;background:var(--soft);color:var(--muted)}
.scan-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.scan-thumb--text svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.scan-row--review .scan-thumb,.scan-panel--review .scan-thumb{outline:1px dashed var(--review)}
.scan-row__copy{min-width:0}
.scan-row__copy strong{display:block;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.scan-row__copy small{display:block;margin-top:3px;color:var(--muted);font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.scan-row__copy .scan-row__manual{color:var(--ink);font-weight:800}
.scan-row__score{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.scan-row__score small{color:var(--muted);font-size:11px}
.scan-row__mark{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--review);font-weight:900}
.scan-row__actions{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.scan-candidates{margin:6px 0 4px;padding:10px 12px;border-radius:14px;background:#fff8ec;animation:scan-reveal 180ms ease-out}
.scan-candidates p{margin:0 0 6px;color:var(--muted);font-size:13px;font-weight:800}
.scan-candidates ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.scan-cand{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.scan-cand__open{flex:1 1 150px;min-width:0;min-height:44px;display:block;padding:0;border:0;background:transparent;text-align:left}
.scan-cand__open strong{display:block;font-size:14px;overflow-wrap:anywhere}
.scan-cand__open small{color:var(--muted);font-size:12px}
.scan-panel{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:#fff}
.scan-panel--review{border-color:var(--review);background:#fff8ec}
.scan-loose p{margin:0 0 6px;color:var(--muted);font-size:13px;font-weight:800}
.scan-refine__origin{display:flex;align-items:center;gap:12px}
.scan-refine__origin p{margin:0;font-weight:800;overflow-wrap:anywhere}
.scan-refine__origin small{display:block;color:var(--muted);font-size:13px;font-weight:600}
.scan-line-choice{justify-items:start;text-align:left;overflow-wrap:anywhere}
.scan-search{display:block}
.scan-count{margin:0;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.scan-picks{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.scan-pick{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.scan-pick__open{min-width:0;min-height:44px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;padding:0;border:0;background:transparent;text-align:left}
.scan-pick__open>span:last-child{min-width:0}
.scan-pick__art{width:44px;height:60px}
.scan-pick__open strong{display:block;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.scan-pick__open small{display:block;margin-top:2px;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
@keyframes scan-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.scan-box{transition:none}.scan-candidates{animation:none}}
@media(max-width:360px){.scan-row__main{grid-template-columns:auto 40px minmax(0,1fr) auto;gap:8px}.scan-thumb{width:40px;height:56px}.seg button{padding:0 10px}.scan-pick{grid-template-columns:minmax(0,1fr)}.scan-pick .pill{justify-self:start}}

/* === Карточка, каталог и «Моё» (implement-ios-mockup-v2, S02/S07–S09/S11) === */
.page-head-v2{margin-bottom:12px}
.page-head-v2 h1,.cat-page>h1{margin:0 0 6px}
.page-lead{margin:0;color:var(--muted);font-size:15px;line-height:1.45}
.field-search{display:block;margin:12px 0}
.field-search input{width:100%;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:15px;background:#fff;font-size:16px;-webkit-appearance:none;appearance:none}
.storage-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;margin:0 0 12px;padding:10px 12px;border-radius:14px;background:#f4dfdf;color:var(--danger);font-size:14px;line-height:1.4}
.storage-note p{margin:0;flex:1 1 200px}
.storage-note .text-button{color:var(--danger)}
/* Packshot: целиком на белом, contain, без обрезки и растяжения. */
.packshot{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:#fff;color:var(--muted)}
.packshot img{display:block;flex:1 1 auto;width:100%;height:100%;min-height:0;max-height:100%;object-fit:contain;object-position:center}
.packshot--row{width:48px;height:64px;border-radius:10px;border:1px solid #eeeae3;padding:3px}
.packshot--card{height:248px;margin:14px 0 12px;padding:12px;border:1px solid #eeeae3;border-radius:26px}
.packshot--missing{gap:6px}
.packshot--missing svg{width:26px;height:40px;fill:none;stroke:currentColor;stroke-width:2}
.packshot--card.packshot--missing svg{width:44px;height:68px}
.packshot--missing small{font-size:13px;font-weight:700}
/* Строка каталога и «Моё». */
.cat-toolbar{display:flex;flex-wrap:wrap;gap:8px}
.cat-toggle{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.cat-toggle[aria-expanded=true],.cat-toggle.is-active{border-color:var(--ink)}
.cat-panel{margin:10px 0 4px;padding:12px;border-radius:16px;background:#f3f0e9;animation:cat-reveal 180ms ease-out}
.cat-sort{display:grid;gap:4px}
.cat-option{display:grid;justify-items:start;gap:1px;width:100%;min-height:48px;padding:6px 12px;border:1px solid transparent;border-radius:12px;background:transparent;text-align:left;font-size:15px;font-weight:750}
.cat-option small{color:var(--muted);font-size:13px;font-weight:600}
.cat-option[aria-pressed=true]{border-color:var(--ink);background:#fff}
.cat-filters{display:grid;gap:12px}
.cat-group{display:grid;gap:6px}
.cat-label{margin:0;color:var(--muted);font-size:13px;font-weight:800}
.cat-field{display:grid;gap:6px}
.cat-field select{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:16px}
.cat-switch{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:750}
.cat-switch input{width:22px;height:22px;margin:0;accent-color:var(--lime-ink)}
.cat-more-toggle{justify-self:start}
.cat-filters__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.cat-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 10px;margin-top:8px}
.cat-summary p{margin:0;color:var(--ink);font-size:14px;font-weight:700;overflow-wrap:anywhere}
.cat-count{margin:12px 0 4px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.cat-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.cat-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:4px;border-bottom:1px solid var(--line)}
.cat-row__open{min-width:0;min-height:76px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 0;border:0;background:transparent;text-align:left}
.cat-row__copy{min-width:0}
.cat-row__copy strong{display:block;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.cat-row__copy small{display:block;margin-top:3px;color:var(--muted);font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.cat-row__copy .cat-row__mine{color:var(--ink);font-weight:800}
.cat-row__score{display:grid;justify-items:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.cat-row__score b{font-size:16px}
.cat-row__score small{color:var(--muted);font-size:12px}
.cat-row__extra{grid-column:1/-1;display:flex;justify-content:flex-start;margin:-6px 0 4px 58px}
.cat-row .rate-editor{grid-column:1/-1;margin:0 0 12px}
.cat-more{margin:14px 0 0}
.cat-empty{padding:28px 8px;text-align:center}
.cat-empty h2{margin:0 0 6px;font-size:21px}
.cat-empty p{margin:0 auto 14px;max-width:32ch;color:var(--muted);font-size:15px;line-height:1.45}
.cat-empty .btn{width:auto;margin:0 auto;padding:0 20px}
/* Карточка. */
.beer-card .card-head{display:grid;gap:6px}
.card-title{margin:0;font-size:30px;line-height:1.08;overflow-wrap:anywhere}
.card-meta{margin:0;color:var(--muted);font-size:14px;line-height:1.4}
.card-meta__style{min-height:44px;margin:-12px 0;padding:0;border:0;background:transparent;color:var(--ink);font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.card-tags li{padding:5px 10px;border-radius:999px;background:var(--soft);font-size:13px;line-height:1.3}
.card-scores{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card-score{display:grid;align-content:start;gap:3px;min-width:0;padding:10px 8px}
.card-score+.card-score{border-left:1px solid var(--line)}
.card-score small{color:var(--muted);font-size:12px;font-weight:800}
.card-score__value{font-size:22px;font-variant-numeric:tabular-nums}
.card-score__value span{color:var(--muted);font-size:14px;font-weight:700}
.card-score__none{color:var(--muted);font-size:15px}
.card-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,136px),1fr));gap:8px;margin-top:12px}
.card-save[aria-pressed=true]{border-color:var(--ink)}
.rate-editor{display:grid;gap:8px;margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:16px;background:#fff;animation:cat-reveal 180ms ease-out}
.rate-editor__hint{margin:0;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.rate-stars{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:2px}
.rate-star{min-height:48px;display:grid;place-items:center;padding:0;border:0;border-radius:12px;background:transparent;color:#bbb2bf}
.rate-star svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.rate-star[data-filled=true]{color:var(--lime-ink)}
.rate-star[data-filled=true] svg{fill:var(--lime);stroke:var(--ink)}
.rate-editor__actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:8px}
.rate-editor__clear{justify-self:start;color:var(--danger)}
.card-sub{margin:0 0 4px;font-size:21px;line-height:1.15}
.style-guide{margin:16px 0 0;padding:14px;border-radius:20px;background:#f3f0e9}
.style-guide__style{margin:0;color:var(--muted);font-size:14px}
.style-radar{display:block;width:100%;max-width:360px;height:auto;margin:6px auto 0;overflow:visible}
.style-radar text{fill:var(--ink);font-size:14px;font-weight:700}
.style-guide__levels{margin:6px 0 0;font-size:14px;line-height:1.45}
.style-guide__note{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.4}
.style-guide--missing .style-guide__note{color:var(--ink);font-weight:700}
.story__lead{font-weight:700}
.card-price{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.card-price p{margin:0;font-size:16px;font-variant-numeric:tabular-nums}
.card-price .card-price__note{margin-top:4px;color:var(--muted);font-size:13px}
.personal-taste{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)}
.personal-taste__note{margin:0 0 6px;color:var(--muted);font-size:13px;line-height:1.4}
.card-about{margin-top:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card-about summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:800}
.card-about p{margin:0 0 8px;font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums}
.card-about__note{color:var(--muted)}
/* «Моё». */
.my-seg{display:flex;width:100%;margin-top:4px}
.my-seg button{flex:1 1 0;min-width:0}
.my-page .my-section{margin-top:4px}
.my-to-catalog{margin-top:8px}
.my-legacy{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.my-legacy__message{margin:0 0 6px;font-size:14px;font-weight:700}
.legacy-list{display:grid;gap:10px;margin:8px 0 0;padding:0;list-style:none}
.legacy-item{display:grid;gap:6px;padding:12px;border:1px solid var(--line);border-radius:16px;background:#fff}
.legacy-item>strong{overflow-wrap:anywhere}
.legacy-item>small{color:var(--muted);font-size:13px}
.legacy-item>.pill{justify-self:start}
.legacy-find .field-search{margin:4px 0 8px}
.legacy-picks{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.legacy-picks li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.legacy-picks strong{display:block;font-size:14px;overflow-wrap:anywhere}
.legacy-picks small{display:block;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.legacy-conflict{display:grid;gap:8px}
.legacy-conflict p{margin:0;font-size:14px;line-height:1.45}
.my-foot{margin-top:18px}
.my-about{color:var(--muted)}
@keyframes cat-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cat-panel,.rate-editor{animation:none}}
@media(max-width:360px){.cat-row__open{grid-template-columns:44px minmax(0,1fr) auto;gap:8px}.packshot--row{width:44px;height:60px}.cat-row__extra{margin-left:52px}.card-title{font-size:28px}.packshot--card{height:220px}.rate-stars{gap:0}}

.my-seg button{padding:0 8px}