/* Layout: телефонная колонка 460px. Бумага с зерном, следы от чашки, карточки как этикетки на чайных банках с двойной обводкой, штамп-печать красным. Фото заменены нарисованными пиалами с сухим листом. */
:root {
  --bg: #ece4d2;
  --surface: #f7f2e6;
  --ink: #2a2a1e;
  --soft: #6d6a56;
  --line: #cfc4a8;
  --green: #44613a;
  --green-soft: #dde4cc;
  --brown: #835528;
  --brown-soft: #eadcc2;
  --seal: #a8402e;
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .16 0 0 0 .10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color: var(--ink); font: 15px/1.5 var(--font-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 22px 108px;
}
.col { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; position: relative; }
.col > * { position: relative; }
.col::before { content: ""; position: absolute; top: -34px; right: -46px; width: 230px; height: 230px; pointer-events: none; opacity: .55;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='230' height='230'><g fill='none' stroke='%23835528' stroke-width='2.2'><circle cx='115' cy='115' r='82' stroke-dasharray='330 190' opacity='.45'/><circle cx='115' cy='115' r='75' opacity='.2'/><circle cx='115' cy='115' r='89' stroke-dasharray='90 470' opacity='.35'/></g></svg>") no-repeat; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: 34px; line-height: 1.08; letter-spacing: -.01em; }
h2 { font-size: 22px; line-height: 1.2; }
p { margin: 0; }
.soft { color: var(--soft); }
.label { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); font-weight: 700; }
.note { font-size: 12.5px; color: var(--soft); }
.it { font-family: var(--font-display); font-style: italic; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
[hidden] { display: none !important; }
svg.art { display: block; width: 100%; height: auto; }

.btn { border: 0; border-radius: 10px; padding: 12px 16px; background: var(--green); color: #fff; font-weight: 600; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--green); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: none; border: 1px solid var(--ink); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .45; cursor: default; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field input, .field textarea, .field select { width: 100%; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--ink); background: var(--surface); }
.field textarea { min-height: 76px; resize: vertical; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.sprig { display: flex; align-items: center; gap: 10px; color: var(--green); opacity: .8; }
.sprig::before, .sprig::after { content: ""; height: 1px; flex: 1; background: currentColor; opacity: .5; }
.sprig svg { width: 34px; height: 18px; flex: none; }

.head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.count { font-size: 13px; color: var(--soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip { flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; font-size: 14px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.tin { text-align: left; background: var(--surface); border: 1px solid var(--ink); border-radius: 6px; padding: 5px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line), 3px 5px 0 4px #2a2a1e14; min-width: 0; }
.tin .ph { position: relative; border-radius: 3px; overflow: hidden; }
.tin .tx { padding: 0 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.tin .nm { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.15; }
.tin .mt { font-size: 12.5px; color: var(--soft); }
.tin .ft { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; }
.tin.wish { border-style: dashed; box-shadow: none; background: transparent; }
.tin.wish .ph { filter: saturate(.55); opacity: .85; }
.rate { font-size: 13px; color: var(--brown); letter-spacing: 1px; white-space: nowrap; }
.gr { font-size: 12px; font-weight: 700; color: var(--green); border: 1px solid var(--green); border-radius: 4px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.seal { position: absolute; top: 8px; right: 8px; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--seal); color: var(--seal); display: grid; place-items: center;
  font: 700 8.5px/1.05 var(--font-display); text-align: center; transform: rotate(-12deg); background: #f7f2e6cc; box-shadow: inset 0 0 0 2px #f7f2e6, inset 0 0 0 3px var(--seal); text-transform: uppercase; }

.panel { background: var(--surface); border: 1px solid var(--ink); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line); margin: 4px; }
.step { display: flex; align-items: center; gap: 10px; }
.step i { font: italic 600 22px var(--font-display); color: var(--seal); width: 26px; flex: none; }
.drop { border: 1.5px dashed var(--ink); border-radius: 10px; padding: 22px 14px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; cursor: pointer; background: #f1ead9; }
.drop input { display: none; }
.status { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--green); animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
details.own { border-top: 1px dashed var(--ink); padding-top: 12px; }
details.own summary { cursor: pointer; font-weight: 600; }
details.own .in { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.imgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.imgs button { padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); text-align: left; display: flex; flex-direction: column; gap: 4px; }
.imgs button[aria-pressed="true"] { border-color: var(--seal); box-shadow: 0 0 0 2px var(--seal); }
.imgs .src { font-size: 11px; color: var(--soft); line-height: 1.2; padding: 0 3px 3px; overflow-wrap: anywhere; }
.basket { display: flex; flex-direction: column; }
.brow { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--ink); align-items: center; }
.brow .ph { border-radius: 4px; overflow: hidden; border: 1px solid var(--ink); }
.brow b { font-family: var(--font-display); font-size: 17px; }
.stepper { display: inline-flex; align-items: center; margin-top: 4px; border: 1px solid var(--ink); border-radius: 8px; overflow: hidden; }
.stepper button { border: 0; background: var(--bg); width: 32px; height: 30px; font-size: 18px; }
.stepper span { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.merge { font-size: 12.5px; color: var(--green); font-weight: 600; }
.rm { background: none; border: 0; color: var(--soft); font-size: 13px; text-decoration: underline; padding: 0; margin-left: 10px; }

.hero { display: flex; flex-direction: column; gap: 8px; }
.back { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--soft); font-size: 14px; }
.hero .big { border: 1px solid var(--ink); border-radius: 6px; padding: 5px; background: var(--surface); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line), 3px 5px 0 4px #2a2a1e14; margin: 4px; }
.hero .big .ph { position: relative; border-radius: 3px; overflow: hidden; }
.brew { background: var(--green-soft); border: 1px solid var(--green); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 14px; margin: 4px; box-shadow: 0 0 0 3px var(--green-soft), 0 0 0 4px var(--green); }
.brew .label { color: var(--green); }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.spec { background: var(--surface); border: 1px solid #44613a55; border-radius: 6px; padding: 9px 12px; display: flex; flex-direction: column; gap: 1px; }
.spec b { font: 700 19px var(--font-display); font-variant-numeric: tabular-nums; }
.spec span { font-size: 12.5px; color: var(--soft); }
.steps { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.steps th { text-align: left; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); padding: 0 0 6px; }
.steps td { padding: 7px 0; border-top: 1px dashed #44613a88; }
.steps td:last-child, .steps th:last-child { text-align: right; font-weight: 700; }
.sec { display: flex; flex-direction: column; gap: 8px; }
.sec p { max-width: 62ch; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 13px; padding: 3px 10px; border: 1px solid var(--brown); border-radius: 4px; color: var(--brown); font-weight: 600; background: var(--brown-soft); }
.log { list-style: none; margin: 0; padding: 0; }
.log li { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--line); font-size: 14px; }
.log time { color: var(--soft); }

.top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.top li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; background: var(--surface); border: 1px solid var(--ink); border-radius: 6px; padding: 8px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line); margin: 4px; }
.top .ph { position: relative; border-radius: 3px; overflow: hidden; align-self: start; }
.top .pos { position: absolute; left: 4px; top: 2px; font: italic 700 26px/1 var(--font-display); color: #fff; text-shadow: 0 1px 6px #0009; }
.top .nm { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2; }
.top .why { font-size: 14px; margin-top: 4px; }

nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--surface); border-top: 1px solid var(--ink);
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
nav.tabs div { max-width: 460px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
nav.tabs a { text-align: center; padding: 7px 4px; text-decoration: none; color: var(--soft); font-size: 12.5px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
nav.tabs a[aria-current="page"] { color: var(--ink); }
nav.tabs a[aria-current="page"]::after { content: ""; position: absolute; top: -7px; width: 28px; height: 3px; background: var(--seal); }
nav.tabs svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.seg { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); border: 1px solid var(--ink); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 9px 4px; font-weight: 600; font-size: 14px; }
.seg button + button { border-left: 1px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.addbtn { display: inline-flex; gap: 6px; align-items: center; }
.timer { font: 700 56px/1 var(--font-display); font-variant-numeric: tabular-nums; text-align: center; padding: 6px 0; }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots i { width: 22px; height: 6px; border-radius: 3px; background: #44613a44; }
.dots i.on { background: var(--green); }
.dots i.cur { background: var(--seal); }
.tog { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--ink); }
.tog small { display: block; color: var(--soft); font-size: 12.5px; }
.sw { flex: none; width: 46px; height: 26px; border-radius: 13px; border: 1px solid var(--ink); background: var(--bg); position: relative; padding: 0; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform .15s; }
.sw[aria-pressed="true"] { background: var(--green); }
.sw[aria-pressed="true"]::after { transform: translateX(20px); background: #fff; }
.friend { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--ink); }
.ava { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; font: 700 18px var(--font-display); background: var(--brown-soft); }
.rev { font-size: 14px; margin-top: 6px; }
.rev b { font-family: var(--font-display); }
.copy { display: flex; gap: 8px; } .copy input { flex: 1; min-width: 0; }
.lock { color: var(--soft); font-style: italic; }
body { position: relative; }
.deco { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.col { z-index: 1; }
.tin, .panel, .top li, .hero .big { background: rgba(247, 242, 230, .8); }
.brew { background: rgba(221, 228, 204, .8); }
.spec { background: rgba(247, 242, 230, .85); }
.deco svg { position: absolute; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tin:nth-child(odd) { transform: rotate(-.7deg); } .tin:nth-child(even) { transform: rotate(.6deg) translateY(3px); }
.panel:nth-of-type(odd) { transform: rotate(.25deg); } .panel:nth-of-type(even) { transform: rotate(-.3deg); }
.top li:nth-child(odd) { transform: rotate(-.4deg); } .top li:nth-child(even) { transform: rotate(.4deg); }
h1 { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'><path d='M2 5C20 1 32 7 52 4S92 2 118 5' fill='none' stroke='%23a8402e' stroke-width='2' stroke-linecap='round' opacity='.75'/></svg>") no-repeat left bottom / 120px 8px; padding-bottom: 10px; }
.hero h1 { background-position: left bottom; }
html, body { overflow-x: hidden; }

/* --- серверные страницы: ссылки вместо кнопок, радио-сегменты, переключатель --- */
a.btn, a.addbtn { text-decoration: none; display: inline-block; text-align: center; }
a.tin, a.chip, a.back { text-decoration: none; color: inherit; }
a.back { color: var(--soft); font-size: 14px; align-self: flex-start; }
a.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.seg a { text-align: center; padding: 9px 4px; font-weight: 600; font-size: 14px; text-decoration: none; color: inherit; }
.seg a + a, .seg label + label { border-left: 1px solid var(--ink); }
.seg a[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.seg label { display: block; cursor: pointer; }
.segopt { display: block; text-align: center; padding: 9px 4px; font-weight: 600; font-size: 14px; }
.seg input:checked + .segopt { background: var(--ink); color: var(--surface); }
.swl { flex: none; cursor: pointer; }
.sw2 { display: block; width: 46px; height: 26px; border-radius: 13px; border: 1px solid var(--ink); background: var(--bg); position: relative; }
.sw2::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform .15s; }
.swl input:checked + .sw2 { background: var(--green); }
.swl input:checked + .sw2::after { transform: translateX(20px); background: #fff; }
.ph-wrap { position: relative; }
.drop { cursor: pointer; }
.gr { white-space: nowrap; }
.ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Небрежный слой: кривые рамки, скотч, пятна от чашки, рукописные подписи ===== */
:root { --hand: "Caveat", "Marck Script", "Comic Sans MS", cursive; --brush: "Ma Shan Zheng", "STKaiti", "KaiTi", serif; --red: #c0392b; --mustard: #d9a441; --wob: 255px 18px 225px 22px / 20px 225px 18px 255px; --wob2: 18px 240px 20px 250px / 250px 20px 230px 18px; }
body {
  background-image:
    radial-gradient(circle at 12% 18%, #c9a56a22 0 46px, transparent 47px),
    radial-gradient(ellipse at 8% 92%, #a8402e14 0 90px, transparent 92px),
    radial-gradient(ellipse at 95% 12%, #44613a14 0 110px, transparent 112px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .16 0 0 0 .10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
}
/* бумага в клетку-«в линеечку» сверху, как страница из блокнота чайного мастера */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background: repeating-linear-gradient(to bottom, transparent 0 31px, #6d8a9b26 31px 32px); }
body::after { content: ""; position: fixed; top: 0; bottom: 0; left: max(10px, calc(50% - 258px)); width: 2px; pointer-events: none; z-index: 0; background: #c0392b3a; }

h1 { font-family: var(--hand); font-weight: 700; font-size: 46px; line-height: .95; letter-spacing: .005em; transform: rotate(-1.6deg); transform-origin: left bottom; }
h2 { font-family: var(--hand); font-weight: 700; font-size: 29px; line-height: 1; transform: rotate(-.6deg); }
.label { font-family: var(--hand); font-size: 20px; text-transform: none; letter-spacing: .01em; color: var(--seal); font-weight: 700; transform: rotate(-1.5deg); display: inline-block; }
.brew .label, .spec span { color: var(--green); }
.note { font-family: var(--hand); font-size: 17px; line-height: 1.15; }
.tin .nm, .top .nm, .brow b, .rev b { font-family: var(--hand); font-weight: 700; font-size: 24px; line-height: .95; }
.spec b, .timer { font-family: var(--hand); }
.timer { font-size: 78px; transform: rotate(-2deg); }
.top .pos { font-family: var(--hand); }
h1 { background-size: 150px 10px; padding-bottom: 12px; }
::selection { background: #d9a44166; }

/* кривые рамки */
.btn { border-radius: var(--wob); padding: 12px 20px; box-shadow: 2px 3px 0 var(--ink); border: 1.5px solid var(--ink); font-family: var(--hand); font-size: 21px; font-weight: 700; transform: rotate(-.8deg); transition: transform .12s, box-shadow .12s; }
.btn:active { transform: translate(2px, 3px) rotate(.4deg); box-shadow: 0 0 0 var(--ink); }
.btn.ghost { box-shadow: 2px 3px 0 #2a2a1e44; border: 1.5px dashed var(--ink); }
.btn.addbtn { background: var(--seal); transform: rotate(2deg); }
.chip { border-radius: var(--wob2); font-family: var(--hand); font-size: 19px; padding: 3px 14px 5px; border-width: 1.5px; }
.chip:nth-child(3n) { transform: rotate(-1.8deg); } .chip:nth-child(3n+1) { transform: rotate(1.2deg) translateY(1px); } .chip:nth-child(3n+2) { transform: rotate(-.4deg); }
.chip[aria-pressed="true"] { background: var(--seal); color: #fff; border-color: var(--seal); }
a.chip[aria-pressed="true"] { background: var(--seal); color: #fff; }
.field input, .field textarea, .field select { border-radius: 12px 4px 14px 5px / 5px 14px 4px 12px; border-width: 1.5px; background: #fffdf4cc; }
.field textarea { background-image: repeating-linear-gradient(to bottom, transparent 0 23px, #6d8a9b33 23px 24px); line-height: 24px; }
.seg { border-radius: var(--wob2); border-width: 1.5px; }
.seg button, .seg a, .segopt { font-family: var(--hand); font-size: 20px; }
.seg a[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--seal); color: #fff; }
.seg input:checked + .segopt { background: var(--seal); color: #fff; }
.drop { border-radius: var(--wob); border-width: 2px; background: #f1ead9aa; }
.gr { border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%; font-family: var(--hand); font-size: 17px; padding: 0 9px 1px; transform: rotate(-3deg); border-width: 1.5px; }
.tag { border-radius: var(--wob2); font-family: var(--hand); font-size: 18px; padding: 1px 12px 3px; transform: rotate(-1.4deg); }
.tag:nth-child(even) { transform: rotate(1.6deg); background: #f4e3a8; }
.rate { color: var(--mustard); text-shadow: 1px 1px 0 #835528; font-size: 15px; }
.seal { font-family: var(--hand); font-size: 14px; font-weight: 700; line-height: .9; transform: rotate(14deg); border-radius: 46% 54% 50% 50% / 52% 48% 54% 46%; width: 54px; height: 54px; color: var(--red); border-color: var(--red); box-shadow: inset 0 0 0 2px #f7f2e6, inset 0 0 0 3px var(--red); mix-blend-mode: multiply; }

/* карточки: кривые, на скотче, с кружком от чашки */
.tin, .panel, .top li, .hero .big, .brew { border-radius: var(--wob); border-width: 1.5px; position: relative; }
.tin { padding: 7px; box-shadow: 4px 6px 0 #2a2a1e22; transition: transform .15s; }
.tin .ph, .hero .big .ph { border-radius: 14px 4px 12px 5px / 5px 12px 4px 14px; }
.tin:nth-child(odd) { transform: rotate(-1.8deg); } .tin:nth-child(even) { transform: rotate(1.5deg) translateY(6px); }
.tin:nth-child(3n) { transform: rotate(2.4deg) translateY(-2px); } .tin:nth-child(5n) { transform: rotate(-3deg) translateY(4px); }
.tin:hover, .tin:active { transform: rotate(0) scale(1.03) !important; z-index: 2; }
.tin::before, .panel::before, .hero .big::before, .top li::before { content: ""; position: absolute; top: -11px; left: 50%; width: 64px; height: 20px; margin-left: -32px; transform: rotate(-4deg); z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(90deg, #d9a441bb 0 6px, #e8bf6ccc 6px 12px); opacity: .78; clip-path: polygon(0 0, 4% 30%, 0 60%, 3% 100%, 100% 100%, 97% 65%, 100% 35%, 96% 0); }
.tin:nth-child(even)::before { background: repeating-linear-gradient(90deg, #a8402e99 0 6px, #c75a47aa 6px 12px); transform: rotate(5deg); left: 30%; }
.tin:nth-child(3n)::before { background: repeating-linear-gradient(90deg, #44613a88 0 6px, #5f8052aa 6px 12px); left: 70%; }
.panel::before { left: 22%; } .panel:nth-of-type(even)::before { left: 78%; transform: rotate(6deg); }
.top li::before { width: 48px; left: 28px; }
.top li:nth-child(even)::before { left: auto; right: 24px; }
.tin.wish { border-style: dashed; border-width: 2px; }
.tin.wish::after { content: "хочу!"; position: absolute; right: 10px; bottom: 44px; font: 700 22px var(--hand); color: var(--seal); transform: rotate(-9deg); }
.brew { background: #dde4ccd9; border-style: solid; box-shadow: 4px 6px 0 #44613a44; }
.brew::after { content: "茶"; position: absolute; right: 12px; top: 6px; font: 54px var(--brush); color: var(--seal); opacity: .22; transform: rotate(8deg); pointer-events: none; }
.spec { border-radius: 14px 4px 12px 4px / 4px 12px 4px 14px; border-style: dashed; }
.spec:nth-child(odd) { transform: rotate(-1deg); } .spec:nth-child(even) { transform: rotate(1.2deg); }
.steps th { font-family: var(--hand); font-size: 18px; text-transform: none; letter-spacing: 0; }
.step i { font-family: var(--hand); font-size: 32px; }
.dots i { border-radius: 50% 40% 55% 45%; width: 18px; height: 10px; transform: rotate(-4deg); }
.ava { border-radius: 52% 48% 45% 55% / 50% 55% 45% 50%; }
.sprig { opacity: 1; }

/* нижняя панель — как дощечка */
nav.tabs { border-top: 2px dashed var(--ink); background: #f7f2e6f2; }
nav.tabs a { font-family: var(--hand); font-size: 18px; }
nav.tabs a[aria-current="page"]::after { height: 6px; border-radius: 50%; width: 36px; transform: rotate(-3deg); }

/* фон: рисунки и болтающие каракули */
.deco svg { stroke-width: 2.4; }
.deco svg[data-fl="1"] { animation: bob 7s ease-in-out infinite; }
.deco svg[data-fl="2"] { animation: bob 9s ease-in-out -3s infinite; }
.deco svg[data-fl="3"] { animation: bob 11s ease-in-out -6s infinite; }
@keyframes bob { 50% { margin-top: -10px; } }
.say { position: absolute; font: 700 25px/1 var(--hand); opacity: .26; white-space: nowrap; border: 2px solid currentColor; padding: 2px 12px 4px; border-radius: 50% 46% 52% 48% / 62% 58% 42% 38%; }
.say::after { content: ""; position: absolute; left: 22px; bottom: -9px; width: 10px; height: 10px; background: var(--bg); border: solid currentColor; border-width: 0 2px 2px 0; transform: skewX(-25deg) rotate(35deg); }

/* рукописные вставки на страницах */
.scrawl { font: 700 24px/1.05 var(--hand); color: var(--green); transform: rotate(-2deg); }
.scrawl.r { color: var(--seal); text-align: right; transform: rotate(2deg); }
.scrawl small { display: block; font-size: 17px; font-weight: 400; color: var(--soft); }
.stamp { position: absolute; font: 58px/1 var(--brush); color: var(--red); border: 3px solid var(--red); padding: 0 6px 4px; border-radius: 6px; opacity: .8; mix-blend-mode: multiply; transform: rotate(10deg); pointer-events: none; z-index: 4; }
.head .stamp { right: 112px; top: -10px; font-size: 38px; }
.cup-ring { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 5px solid #835528; opacity: .13; pointer-events: none; box-shadow: inset 0 0 0 8px #83552812; filter: blur(.4px); }
.foot { margin-top: 18px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.foot svg { width: 220px; height: auto; color: var(--brown); }
.foot .scrawl { font-size: 22px; color: var(--soft); }
@media (prefers-reduced-motion: reduce) { .deco svg[data-fl] { animation: none; } }
@media (max-width: 380px) { h1 { font-size: 40px; } }

/* без курсива */
.it, .lock, .step i, .top .pos { font-style: normal; }
.say { display: none; }

/* ===== Строгий шрифт вместо рукописного ===== */
:root { --hand: var(--font-display); }
h1 { font-size: 36px; line-height: 1.08; font-weight: 700; letter-spacing: -.01em; transform: none; background-size: 120px 8px; padding-bottom: 10px; }
h2 { font-size: 22px; line-height: 1.2; font-weight: 600; transform: none; }
.label { font: 700 11.5px var(--font-body); letter-spacing: .1em; text-transform: uppercase; transform: none; }
.note { font: 400 12.5px/1.4 var(--font-body); }
.tin .nm, .top .nm, .brow b, .rev b { font-size: 17px; line-height: 1.15; font-weight: 700; }
.top .nm { font-size: 18px; }
.top .pos { font: 700 26px/1 var(--font-display); }
.spec b { font-size: 19px; }
.timer { font-size: 56px; transform: none; }
.btn { font: 600 15px var(--font-body); }
.chip { font: 500 14px var(--font-body); padding: 6px 13px; }
.seg button, .seg a, .segopt { font: 600 14px var(--font-body); }
.gr { font: 700 12px var(--font-body); transform: none; padding: 0 7px; }
.tag { font: 600 13px var(--font-body); }
.steps th { font: 700 11.5px var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.step i { font: 600 22px var(--font-display); }
nav.tabs a { font: 600 12.5px var(--font-body); }
.seal { font: 700 8.5px/1.05 var(--font-display); text-transform: uppercase; }
.tin.wish::after { content: none; }
.scrawl { font: 500 16px/1.3 var(--font-display); transform: none; }
.foot .scrawl { font-size: 15px; }

/* ===== Дегустационная карта ===== */
.tc { display: flex; flex-direction: column; gap: 16px; background: rgba(247,242,230,.86); border: 1.5px solid var(--ink); border-radius: var(--wob); padding: 18px 16px; margin: 4px; box-shadow: 0 0 0 3px #f7f2e6, 0 0 0 4px var(--line), 4px 6px 0 #2a2a1e22; position: relative; }
.tc h2 { font-size: 26px; }
.tc-lead { font-size: 13.5px; line-height: 1.45; }
.tcb { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--ink); }
.pal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sw3 { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sw3 i { display: block; height: 58px; border-radius: 14px 4px 12px 5px / 5px 12px 4px 14px; border: 1.5px solid var(--ink); box-shadow: inset 0 -14px 22px #00000026, inset 0 8px 14px #ffffff26; }
.sw3 i.lq { box-shadow: inset 0 -20px 26px #00000018, inset 0 10px 18px #ffffff40; }
.sw3 b { font: 700 12.5px var(--font-body); }
.sw3 span { font-size: 12px; line-height: 1.3; color: var(--soft); }
.aroma { display: flex; flex-wrap: wrap; gap: 7px; }
.am { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 5px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fffdf4; font: 600 14px var(--font-body); }
.am i, .fam i { width: 10px; height: 10px; border-radius: 50%; background: var(--fc); flex: none; display: inline-block; }
.am:nth-child(odd) { transform: rotate(-1deg); } .am:nth-child(even) { transform: rotate(1.2deg); }
.fam { white-space: nowrap; } .fam i { margin-right: 4px; }
.f-flower { --fc: #c4678f; } .f-fruit { --fc: #d4703a; } .f-sweet { --fc: #d9a441; } .f-nut { --fc: #9a6a3a; } .f-wood { --fc: #6b4a2a; } .f-earth { --fc: #5a4636; }
.f-herb { --fc: #5f8a3a; } .f-sea { --fc: #3a8aa0; } .f-spice { --fc: #b8472e; } .f-smoke { --fc: #4a4a4a; } .f-milk { --fc: #d8cdb0; } .f-mineral { --fc: #7a8a96; }
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar { display: grid; grid-template-columns: 112px 1fr 14px; gap: 10px; align-items: center; --a: #835528; }
.bn { font: 600 13.5px var(--font-body); }
.bv { font: 700 13px var(--font-body); color: var(--soft); text-align: right; font-variant-numeric: tabular-nums; }
.trk { position: relative; display: block; height: 14px; border-radius: 7px; border: 1.5px solid var(--ink); background: linear-gradient(90deg, #f3ead0, var(--a)); }
.trk::after { content: ""; position: absolute; inset: 0; border-radius: 7px; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), #2a2a1e44 calc(20% - 1px) 20%); }
.dot { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fffdf4; border: 2.5px solid var(--ink); z-index: 2; box-shadow: 1px 2px 0 #2a2a1e44; }
.ax-sweet { --a: #d9a441; } .ax-bitter { --a: #4f5a22; } .ax-astringent { --a: #8a3a3a; } .ax-umami { --a: #2f7a62; }
.ax-sour { --a: #d4603a; } .ax-body { --a: #6b4020; } .ax-aroma { --a: #9a5aa0; } .ax-aftertaste { --a: #a8402e; }
.after { font-size: 14px; }
.scale { display: flex; flex-direction: column; gap: 6px; }
.scale .sh { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; }
.scale .se { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--soft); }
.scale.fer .trk { background: linear-gradient(90deg, #7fae4a, #d8c66a 35%, #b3622e 65%, #3b2a20); }
.scale.roa .trk { background: linear-gradient(90deg, #efe0b0, #c99a55 50%, #4a2c18); }
.scale .trk::after { display: none; }
.evo { list-style: none; margin: 0; padding: 0 0 0 20px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.evo::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: linear-gradient(#d9a441, #a8402e 55%, #4a2c1e); }
.evo li { position: relative; display: flex; flex-direction: column; gap: 1px; }
.evo li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fffdf4; border: 2.5px solid var(--ink); }
.evo b { font: 700 12px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--seal); }
.evo span { font-size: 14px; line-height: 1.4; }

/* ===== История ===== */
.story .lead { font: 500 18px/1.4 var(--font-display); }
.story .hist { font-size: 15px; line-height: 1.65; max-width: 62ch; }
.story .hist::first-letter { font: 700 3.1em/.8 var(--font-display); float: left; padding: 4px 8px 0 0; color: var(--seal); }
.tl { list-style: none; margin: 6px 0 0; padding: 0 0 0 4px; border-left: 2px solid var(--seal); display: flex; flex-direction: column; gap: 12px; margin-left: 4px; }
.tl li { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding-left: 16px; align-items: baseline; }
.tl li::before { content: ""; position: absolute; left: -9px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--seal); border: 2.5px solid var(--surface); }
.tl time { font: 700 16px var(--font-display); color: var(--seal); }
.tl span { font-size: 14px; line-height: 1.45; }
.facts { display: flex; flex-direction: column; gap: 10px; }
.facts p { background: #f4e3a8cc; border: 1.5px dashed var(--brown); border-radius: var(--wob2); padding: 10px 14px; font-size: 14px; line-height: 1.5; transform: rotate(-.5deg); }
.facts p:nth-child(even) { transform: rotate(.6deg); background: #dde4ccdd; border-color: var(--green); }
.fk { display: block; font: 700 11.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--seal); margin-bottom: 2px; }
.src ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.src li { display: flex; flex-direction: column; gap: 1px; padding-left: 14px; position: relative; }
.src li::before { content: "↗"; position: absolute; left: 0; color: var(--seal); font-weight: 700; }
.src a { color: var(--green); font-weight: 700; text-underline-offset: 3px; overflow-wrap: anywhere; }
.src li span { font-size: 12.5px; color: var(--soft); }
.enr .btn { background: var(--brown); }
@media (max-width: 400px) { .bar { grid-template-columns: 96px 1fr 12px; } .tl li { grid-template-columns: 70px 1fr; } }

/* ===== Спокойный слой: читаемость важнее озорства ===== */
:root { --wob: 12px; --wob2: 8px; --sheet: #fbf8ee; }
/* фон тише: без линеек и поля, рисунки бледнее */
body::before, body::after { display: none; }
.deco svg { stroke-width: 2; }
.deco { opacity: .7; }
.col::before { opacity: .3; }
/* подложка под любым текстовым блоком: плотная, ровная */
.sheet, .panel, .brew, .top li, .tin, .hero .big { background: var(--sheet); }
.brew { background: #e9eed9; }
.sheet { border: 1px solid #2a2a1ecc; border-radius: 12px; padding: 18px 18px 20px; margin: 4px; box-shadow: 0 1px 0 #fff inset, 0 2px 0 var(--line), 0 8px 18px -8px #2a2a1e40; }
.sheet.sec { gap: 12px; }
.sheet .label { display: block; margin-bottom: 2px; }
.panel, .tin, .top li, .hero .big, .brew { border-radius: 12px; box-shadow: 0 1px 0 #fff inset, 0 2px 0 var(--line), 0 8px 18px -8px #2a2a1e40; }
.tin { padding: 6px; }
/* почти без наклонов */
.tin:nth-child(n), .tin:nth-child(even), .tin:nth-child(3n), .tin:nth-child(5n) { transform: none; }
.tin:hover { transform: translateY(-2px) !important; }
.panel:nth-of-type(n), .top li:nth-child(n), .spec:nth-child(n), .facts p:nth-child(n), .am:nth-child(n), .tag:nth-child(n), .chip:nth-child(n) { transform: none; }
.tin .ph, .hero .big .ph { border-radius: 8px; }
.tin::before, .panel::before, .top li::before { display: none; }
.hero .big::before { width: 54px; height: 16px; top: -9px; }
/* заголовки и подписи: ровные */
h1 { background-size: 100px 7px; }
.label { font-size: 11.5px; }
.tin .nm { font-size: 17px; }
.chip { border-radius: 999px; padding: 6px 13px; background: var(--sheet); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
a.chip[aria-pressed="true"] { background: var(--ink); }
.seg { border-radius: 10px; background: var(--sheet); }
.seg a[aria-pressed="true"], .seg button[aria-pressed="true"], .seg input:checked + .segopt { background: var(--ink); }
.btn { border-radius: 10px; transform: none; box-shadow: 0 2px 0 #2a2a1e; }
.btn.addbtn { background: var(--green); transform: none; }
.btn.ghost { border: 1px solid var(--ink); background: var(--sheet); box-shadow: none; }
.field input, .field textarea, .field select { border-radius: 8px; background: #fff; }
.field textarea { background-image: none; line-height: 1.5; }
.drop { border-radius: 10px; background: var(--sheet); }
.spec { border-style: solid; border-radius: 8px; background: #fbf8ee; }
.tag { border-radius: 6px; }
.gr { border-radius: 6px; }
.seal { transform: rotate(10deg); }
/* карточка дегустации: ровнее */
.tc { padding: 18px; background: var(--sheet); }
.tc h2 { font-size: 24px; }
.sw3 i { border-radius: 8px; }
.am { background: #fff; border-width: 1px; }
.trk { border-width: 1px; }
.dot { box-shadow: 0 1px 3px #0003; border-width: 2px; }
.facts p { border-radius: 8px; border-style: solid; border-width: 1px; background: #f6ecc4; }
.facts p:nth-child(even) { background: #e5ebd3; }
.story .lead { font-size: 19px; }
.story .hist { font-size: 15.5px; }
.tl li::before { border-color: var(--sheet); }
.dots i { transform: none; border-radius: 3px; width: 22px; height: 6px; }
nav.tabs { border-top: 1px solid var(--ink); background: var(--sheet); }
nav.tabs a[aria-current="page"]::after { height: 3px; border-radius: 0; transform: none; width: 28px; }
.foot .scrawl { color: var(--soft); }

/* ===== Компактная заварка и сессия ===== */
.brew.cmp { padding: 12px 14px; gap: 10px; }
.cmp-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.btn.sm { padding: 6px 14px; font-size: 14px; white-space: nowrap; text-decoration: none; }
.facts-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.facts-row li { display: flex; flex-direction: column; background: #fbf8ee; border: 1px solid #44613a66; border-radius: 8px; padding: 6px 10px; }
.facts-row b { font: 700 17px/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.facts-row span { font-size: 12px; color: var(--soft); }
.infs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.il { font: 700 11.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-right: 4px; }
.ip { min-width: 34px; text-align: center; padding: 2px 8px; border-radius: 999px; background: #fbf8ee; border: 1px solid #44613a66; font: 700 13.5px var(--font-body); font-variant-numeric: tabular-nums; }
.ip.more { background: transparent; border-style: dashed; color: var(--soft); }
.iu { font-size: 12px; color: var(--soft); }

.nst { display: grid; grid-template-columns: 42px 1fr 42px; border: 1px solid var(--ink); border-radius: 8px; overflow: hidden; background: #fff; }
.nst button { border: 0; background: var(--bg); font: 600 20px var(--font-body); height: 44px; }
.nst button:active { background: var(--line); }
.nst input { border: 0 !important; border-radius: 0 !important; text-align: center; font: 700 20px var(--font-display); min-width: 0; padding: 0 !important; background: #fff !important; }
.nst.sm { grid-template-columns: 52px 76px 52px; width: max-content; }
.nst.sm button { height: 36px; font-size: 15px; }
.nst.sm input { font-size: 18px; }
.own-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#sess .timer { font-size: 72px; padding: 2px 0; }
.timer.over { color: var(--seal); }
.btn.big { padding: 15px 16px; font-size: 18px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pill { display: inline-flex; gap: 6px; align-items: baseline; padding: 2px 10px; border-radius: 999px; background: #fbf8ee; border: 1px solid #44613a66; font-size: 13px; font-variant-numeric: tabular-nums; }
.pill b { color: var(--seal); font-family: var(--font-display); }
#sess { display: flex; flex-direction: column; gap: 16px; }
#sess .panel .rm { margin-left: 0; }

/* ===== Фото на карточке, правка записей, подбор ===== */
.edl { color: var(--green); font-weight: 600; text-underline-offset: 3px; }
.edl { font-size: 13px; margin-left: 6px; white-space: nowrap; }
.pills.left { justify-content: flex-start; margin-top: 8px; }
.chip.pick:has(input:checked) { background: var(--ink); color: var(--surface); }
.seg label:has(input:checked) .segopt { background: var(--ink); color: var(--surface); }

/* ===== Единые отступы блоков: 20 px между блоками, 16 px внутри, 14 px между элементами ===== */
:root { --gap: 20px; --pad: 16px; --inner: 14px; }
.col { gap: var(--gap); }
.col > form { display: flex; flex-direction: column; gap: var(--gap); margin: 0; }
.panel, .sheet, .brew, .brew.cmp, .tc, .top li, .hero .big { margin: 0; padding: var(--pad); }
.panel, .sheet.sec, .tc, .brew, .brew.cmp { gap: var(--inner); }
.tc { gap: var(--inner); }
.tcb { padding-top: var(--inner); gap: 10px; }
.top { gap: var(--gap); }
.hero { gap: 8px; }
.hero .big { padding: 6px; }
#sess { gap: var(--gap); }
#sharedBox, #ownBox { display: flex; flex-direction: column; gap: var(--inner); }
.panel > p, .panel > .note { margin: 0; }
.tog:first-of-type { border-top: 0; padding-top: 0; }
.story .hist.nodrop::first-letter { font: inherit; float: none; padding: 0; color: inherit; }

/* ===== Панда ждёт ответа нейросети ===== */
.think { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; background: #fbf8ee; border: 1px solid var(--ink); border-radius: 12px; box-shadow: 0 2px 0 var(--line); }
.think .tt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.think .tt b { font: 700 16px var(--font-display); }
.think small { font-size: 12.5px; color: var(--soft); line-height: 1.35; }
.think .el { font-variant-numeric: tabular-nums; }
.panda { width: 64px; height: 64px; flex: none; overflow: visible; }
.panda .pbody { transform-origin: 36px 50px; animation: pandaBob 2.2s ease-in-out infinite; }
.panda .eyes { transform-origin: 36px 31px; animation: blink 4s infinite; }
.panda .st { animation: steam 1.8s ease-in-out infinite; opacity: 0; }
.panda .s2 { animation-delay: .9s; }
.think.mini { padding: 0; background: none; border: 0; box-shadow: none; gap: 8px; }
.think.mini .panda { width: 28px; height: 28px; }
.think.mini .tt { flex-direction: row; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.think.mini .tt b { font: 600 13px var(--font-body); }
@keyframes pandaBob { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-2px); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .8; } 100% { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .panda .pbody, .panda .eyes, .panda .st { animation: none; } .panda .st { opacity: .6; } }

/* ===== Панда с вопросом ===== */
.think.ask { background: #f6ecc4; }
.panda.asking { width: 78px; height: 70px; overflow: visible; }
.panda.asking .tilt { transform-origin: 34px 50px; animation: tilt 3s ease-in-out infinite; }
.panda.asking .qm { transform-origin: 64px 14px; animation: qm 1.6s ease-in-out infinite; }
@keyframes tilt { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(5deg); } }
@keyframes qm { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-4px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .panda.asking .tilt, .panda.asking .qm { animation: none; } }

/* ===== Где лежит чай ===== */
.whereb { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font: 700 12.5px var(--font-body); border: 1px solid currentColor; background: #fbf8ee; }
.whereb.w-shelf { color: var(--green); } .whereb.w-tried { color: var(--brown); } .whereb.w-wish { color: var(--seal); }
.whereb::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.where { font: 700 11.5px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--brown); }
.tin.tried { border-style: solid; }
.tin.tried .ph { filter: saturate(.8); }
.triedbox { display: flex; flex-direction: column; gap: var(--inner, 14px); }
#qtyStep { display: flex; flex-direction: column; gap: 14px; }
#qtyStep[hidden] { display: none; }
.tagwish { font-size: 12px; font-weight: 700; color: var(--seal); border: 1px solid var(--seal); border-radius: 999px; padding: 0 8px; }

/* ===== Табы полки, друзья ===== */
a.back { display: block; }
.tabs4 { background: var(--sheet); }
.tabs4 a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px 7px; font-size: 13.5px; line-height: 1.15; }
.tabs4 .cnt { font: 700 11.5px var(--font-body); opacity: .65; font-variant-numeric: tabular-nums; }
.tabs4 a[aria-pressed="true"] .cnt { opacity: .9; }
.soon { font: 700 11.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--seal); border: 1px solid var(--seal); border-radius: 999px; padding: 2px 10px; }
.how { list-style: none; counter-reset: s; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.how li { counter-increment: s; position: relative; padding-left: 38px; display: flex; flex-direction: column; gap: 1px; }
.how li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--seal); color: #fff; display: grid; place-items: center; font: 700 14px var(--font-display); }
.how b { font: 700 15px var(--font-display); }
.how span { font-size: 14px; line-height: 1.45; color: var(--ink); }

/* ===== Друзья ===== */
.copy input { padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; font-size: 13.5px; }
.copy .btn { white-space: nowrap; padding: 10px 14px; }
.friend + .friend { margin-top: 0; }
.invite h2 { font-size: 24px; }


/* ===== Фото на карточке ===== */
.phbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.phpanel { gap: var(--inner); }
.phpanel .imgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.phalt { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rm.up { cursor: pointer; text-decoration: underline; margin: 0; }
.phslim { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; background: var(--sheet); border: 1px solid var(--ink); border-radius: 12px; padding: 8px 10px 8px 8px; box-shadow: 0 2px 0 var(--line); }
.phslim .thumb { border-radius: 8px; overflow: hidden; }
.phslim b { display: block; font: 700 15px var(--font-display); }
.phslim .note { display: block; line-height: 1.3; }
.imgs button { background: var(--sheet); }
@media (max-width: 400px) { .phslim { grid-template-columns: 60px 1fr; } .phslim .btn { grid-column: 1 / -1; } }

.tr { font: 700 10.5px var(--font-body); letter-spacing: .03em; text-transform: uppercase; }
.tr.t0 { color: var(--green); } .tr.t1 { color: var(--brown); } .tr.t2 { color: var(--soft); }
/* Панель администратора */
.admin-item { padding: 14px 0; border-bottom: 1px solid rgba(42,42,30,.14); overflow-wrap: anywhere; }
.admin-item:last-child { border-bottom: 0; }

/* Читаемые экраны коллекции и добавления */
:root { --soft: #5d604f; }
body { line-height: 1.6; }
.col { max-width: 480px; }
.col::before { opacity: .14; }
.deco { opacity: .38; pointer-events: none; }
.page-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.page-intro .back { margin-bottom: 8px; }
.page-intro h1, .shelf-heading h1 { max-width: 14ch; }
.page-intro .soft, .shelf-heading .soft { max-width: 38ch; line-height: 1.65; }
.shelf-heading { align-items: flex-end; gap: 14px; }
.shelf-heading .soft { margin-top: 5px; font-size: 13px; }
.shelf-heading .addbtn { flex: none; margin-bottom: 3px; white-space: nowrap; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.section-heading h2 { margin-top: 4px; }
.eyebrow-small { color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.section-mark, .empty-symbol, .drop-icon { display: grid; place-items: center; flex: none; color: var(--green); background: #e9eedf; border: 1px solid #d3ddc9; }
.section-mark { width: 38px; height: 38px; border-radius: 12px; font: 600 20px var(--font-display); }
.empty-state { align-items: flex-start; padding: 24px; gap: 10px; }
.empty-state .btn { align-self: stretch; margin-top: 8px; }
.empty-symbol { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 4px; font: 600 22px var(--font-display); }
.drop { min-height: 154px; padding: 18px; gap: 6px; background: #f6f8ef; border: 1.5px dashed #a8b79c; transition: border-color .15s, background .15s; }
.drop:hover, .drop:focus-within { border-color: var(--green); background: #edf2e6; }
.drop input { display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.drop .note { max-width: 31ch; text-align: center; line-height: 1.5; }
.drop-icon { width: 40px; height: 40px; margin-bottom: 2px; border-radius: 50%; background: #fff; font-size: 21px; }
.form-heading h2 { margin-bottom: 5px; }
.form-heading .note, .details-hint { line-height: 1.5; }
.details-hint { margin-top: 4px; }
.field { gap: 8px; }
.field input, .field select { min-height: 46px; }
.field textarea { min-height: 92px; }
.field input::placeholder, .field textarea::placeholder { color: #858778; opacity: 1; }
.btn { min-height: 46px; line-height: 1.3; transition: background-color .15s, box-shadow .15s; }
.btn:not(.ghost):hover { background-color: #36552f; }
.btn.ghost:hover { background-color: #edf2e6; }
.btn:focus-visible, .chip:focus-visible, .seg a:focus-visible, .back:focus-visible { outline: 3px solid #799d69; outline-offset: 3px; }
.chip { min-height: 42px; padding: 8px 15px; }
.seg a, .segopt { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.tabs4 a { min-height: 56px; }
nav.tabs div { max-width: 480px; }
nav.tabs a { min-height: 52px; justify-content: center; }
.note { line-height: 1.55; }
#infoBox, #qtyStep, #imgStep { display: flex; flex-direction: column; gap: 14px; }
#infoBox[hidden], #qtyStep[hidden], #imgStep[hidden] { display: none; }
#basketPanel .brow { padding: 14px 0; }
#result:empty, #photoMsg:empty { display: none; }
@media (max-width: 380px) { .shelf-heading h1 { font-size: 32px; } .shelf-heading .addbtn { padding-inline: 11px; font-size: 13px; } .tabs4 a { font-size: 12px; } .empty-state { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
.source-picker { display: flex; flex-direction: column; gap: 9px; }
.source-picker label { position: relative; }
.source-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.source-picker input:focus-visible + .segopt { outline: 3px solid #799d69; outline-offset: -4px; }