/* /z-dilny/  (zf industries tab rail, spec 3.6 + 8.1). Page-only; tokens and components come from zf.css.
   The demo tiles (.lab and below) are ported from the old build's aj.css and recoloured to the new palette. */

/* tab rail + panel */
.zd-sec { padding-top: 0; }
.zd { display: flex; gap: 24px; align-items: flex-start; }
.zd-rail { width: 284px; flex: none; padding: 12px; border-radius: var(--r-grid); background: var(--card); }
.zd-rail__toggle { display: none; }
.zd-rail__list { display: flex; flex-direction: column; gap: 8px; padding: 0 6px; }
.zd-tab { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 16px; border-radius: var(--r-tag); text-align: left; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-2); transition: color var(--dur-2), background-color var(--dur-2); }
.zd-tab b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); transition: color var(--dur-2); }
.zd-tab[aria-selected="true"] { color: var(--accent); background: var(--accent-wash); }
.zd-tab[aria-selected="true"] b { color: var(--accent); }
.zd-tab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 14px; width: 2px; height: 16px; border-radius: 2px; background: var(--accent-2); }
@media (hover: hover) and (pointer: fine) { .zd-tab:hover { color: var(--text); } .zd-tab[aria-selected="true"]:hover { color: var(--accent); } }
.zd-panels { flex: 1; min-width: 0; }
.zd-panel { display: flex; flex-wrap: wrap; gap: 32px; padding: 32px; border-radius: var(--r-panel); background: var(--card); min-height: 328px; }
.zd-panel[hidden] { display: none; }
.zd-panel.is-in { animation: zdIn var(--dur-2) ease both; }
@keyframes zdIn { from { opacity: 0; } to { opacity: 1; } }
.zd-panel .lab { flex: none; width: min(440px, 100%); height: 560px; }
.zd-panel__txt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.zd-panel__k { font-size: 13px; line-height: 20px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.zd-panel__t { margin-top: 12px; font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -.02em; }
.zd-panel__d { margin-top: 16px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.zd-panel__h { margin: 12px 0 32px; font-size: 16px; line-height: 24px; color: var(--muted); }
.zd-note { margin-top: 24px; font-size: 16px; line-height: 24px; color: var(--muted); }
@media (max-width: 991px) {
  .zd { flex-direction: column; gap: 16px; }
  .zd-rail { width: 100%; padding: 8px; }
  .zd-rail__list { flex-direction: row; overflow-x: auto; padding: 0 0 10px; gap: 4px; scrollbar-width: none; }
  .zd-rail__list::-webkit-scrollbar { display: none; }
  .zd-tab { flex: none; width: auto; white-space: nowrap; }
  .zd-tab[aria-selected="true"]::before { left: 16px; right: 16px; top: auto; bottom: -6px; width: auto; height: 2px; }
  .zd-panels { width: 100%; }
}
@media (max-width: 768px) { .zd-panel { padding: 24px; flex-direction: column; min-height: 0; } .zd-panel .lab { width: 100%; } }
@media (max-width: 575px) {
  .zd-rail { padding: 0; background: none; }
  .zd-rail__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 14px 16px; border: 1px solid var(--muted); border-radius: 10px; font-size: 16px; line-height: 20px; font-weight: 500; }
  .zd-rail__toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .25s; }
  .zd-rail__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .zd-rail__list { display: none; flex-direction: column; overflow: visible; margin-top: 4px; padding: 8px; gap: 2px; border-radius: 0 0 10px 10px; background: var(--card); }
  .zd-rail__list.is-open { display: flex; }
  .zd-tab { width: 100%; white-space: normal; padding: 12px 14px; }
  .zd-tab[aria-selected="true"]::before { left: 0; right: auto; top: 14px; bottom: auto; width: 2px; height: 16px; }
  .zd-panel { padding: 16px; }
  .zd-panel .lab { height: min(560px, 150vw); }
}

/* demo tiles: local palette so the ported rules keep their names */
.lab { --navy: #1A1030; --wine: #5B3FC4; --bone: #EDE9F8; --paper: #FFFFFF; --ember: #AD96F1; --out: cubic-bezier(.075, .82, .165, 1); --out2: cubic-bezier(.215, .61, .355, 1);
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-media); }
.lab .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lab button { font-family: var(--font); }
.fly { --navy: #1A1030; }

/* ---------- Z dílny: live demos (js/ajlab.js) ---------- */
.lab--navy { background: #1A1030; color: var(--paper); }
.lab--wine { background: #2B1A4F; color: var(--paper); }
.lab--bone { background: var(--bone); color: var(--navy); }
.lab--paper { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px rgba(26, 16, 48, .14); }
.lab__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.lab__cap { display: grid; gap: 6px; padding: 16px 20px 20px; border-top: 1px solid rgba(127, 127, 127, .3); }
.lab__cap b { font: 600 13px/1.3 var(--font); text-transform: uppercase; letter-spacing: .06em; }
.lab__cap span { font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.lab :focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; box-shadow: none; }
.lab .cfg__sw:focus-visible, .lab .ds__acs button:focus-visible { outline-offset: 6px; }
.lab .ai__win :focus-visible { outline-color: var(--wine); }
.lab--bone :focus-visible, .lab--paper :focus-visible { outline-color: var(--wine); }
.lab button:disabled { cursor: default; }
/* a slider that is easy to hit with a thumb */
.lab input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
.lab input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.lab input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.lab input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--ember); border: 3px solid var(--paper); }
.lab input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ember); border: 3px solid var(--paper); }

/* 01 configurator: an isometric worktop in CSS 3D, stone textures are SVG noise */
.cfg { display: flex; flex-direction: column;
  --st0: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .82 0 0 0 0 .8 0 0 0 0 .78 0 0 0 8 -4.6'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .33 0 0 0 6 -3.2'/%3E%3C/filter%3E%3Crect width='220' height='220' fill='%231d1d22'/%3E%3Crect width='220' height='220' filter='url(%23b)'/%3E%3Crect width='220' height='220' filter='url(%23a)'/%3E%3C/svg%3E");
  --st1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='turbulence' baseFrequency='.004 .011' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .46 0 0 0 0 .47 0 0 0 0 .5 -9 0 0 0 1.25'/%3E%3C/filter%3E%3Crect width='420' height='420' fill='%23efece7'/%3E%3Crect width='420' height='420' filter='url(%23v)'/%3E%3C/svg%3E");
  --st2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .52 0 0 0 0 .48 0 0 0 9 -5.6'/%3E%3C/filter%3E%3Crect width='200' height='200' fill='%23f3f0ea'/%3E%3Crect width='200' height='200' filter='url(%23a)'/%3E%3C/svg%3E");
  --st3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .2 0 0 0 7 -3.9'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .9 0 0 0 0 .88 0 0 0 6 -3.3'/%3E%3C/filter%3E%3Crect width='220' height='220' fill='%23b49d97'/%3E%3Crect width='220' height='220' filter='url(%23b)'/%3E%3Crect width='220' height='220' filter='url(%23a)'/%3E%3C/svg%3E");
  --tex: var(--st0); --len: 240; }
.cfg__view { flex: 1; min-height: 0; display: grid; place-items: center; perspective: 1100px; container-type: inline-size; }
/* sizes in cm × .24cqw; the worktop sits on a light kitchen cabinet so it reads at a glance */
.cfg__slab { --t: 3.4cqw; --ch: 24cqw; position: relative; width: calc(var(--len) * .24cqw); height: calc(62 * .3cqw); margin-top: -12cqw; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-30deg); transition: width .7s var(--out); animation: sway 7s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotateX(60deg) rotateZ(-38deg); } to { transform: rotateX(56deg) rotateZ(-26deg); } }
.lab:not(.vis) .cfg__slab { animation-play-state: paused; }
.cfg__slab::before { content: ''; position: absolute; inset: 6% -2% -8% 4%; border-radius: 30px; background: rgba(5, 6, 20, .6); filter: blur(18px); transform: translateZ(calc(-1 * var(--t) - var(--ch))); }
.cfg__slab i { position: absolute; background: var(--tex) 0 0 / 160px; }
.cfg__top { inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.cfg__front { left: 0; right: 0; top: 100%; height: var(--t); transform-origin: top; transform: rotateX(-90deg); }
.cfg__side { right: 100%; top: 0; bottom: 0; width: var(--t); transform-origin: right; transform: rotateY(-90deg); }
.cfg__cab, .cfg__cabs { position: absolute; background: #e6dccf; }
/* cabinet front: recessed under the worktop, three drawers drawn as lines */
.cfg__cab { left: 1.2cqw; right: 1.2cqw; top: calc(100% - 2cqw); height: var(--ch); transform-origin: top; transform: translateZ(calc(-1 * var(--t))) rotateX(-90deg); background: linear-gradient(180deg, transparent calc(33% - 1px), rgba(26, 16, 48, .28) calc(33% - 1px) 33%, transparent 33% calc(66% - 1px), rgba(26, 16, 48, .28) calc(66% - 1px) 66%, transparent 66%), linear-gradient(90deg, transparent calc(50% - 1px), rgba(26, 16, 48, .28) calc(50% - 1px) 50%, transparent 50%), linear-gradient(180deg, #efe7dc, #d8ccbc); }
.cfg__cabs { right: calc(100% - 1.2cqw); top: 1.2cqw; bottom: 2cqw; width: var(--ch); transform-origin: right; transform: translateZ(calc(-1 * var(--t))) rotateY(-90deg); background: linear-gradient(90deg, #a99a88, #c3b6a5); }
.cfg__front::after, .cfg__side::after, .cfg__top::after { content: ''; position: absolute; inset: 0; transition: background .4s; }
.cfg__front::after { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .3)); }
.cfg__side::after { background: rgba(0, 0, 0, .42); }
.cfg[data-edge="1"] .cfg__top::after { background: linear-gradient(0deg, rgba(255, 255, 255, .34) 0 7%, transparent 7.5%); }
.cfg[data-edge="2"] .cfg__front::after { background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .5)); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.cfg[data-edge="2"] .cfg__top { border-radius: 0 0 6px 6px; }
.cfg__ui { display: grid; gap: 10px; padding: 0 20px 16px; }
.cfg__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cfg__name { font: 600 25px/1.1 var(--font); }
.cfg__dim { font: 600 13px/1 var(--font); letter-spacing: .04em; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.cfg__sws { display: flex; gap: 10px; }
.cfg__sw { width: 44px; height: 44px; border-radius: 50%; background: var(--s) 0 0 / 120px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: box-shadow .2s, transform .2s; }
.cfg__sw[aria-checked="true"] { box-shadow: 0 0 0 3px var(--navy), 0 0 0 5px var(--ember); }
.cfg__sw:nth-child(1) { --s: var(--st0); } .cfg__sw:nth-child(2) { --s: var(--st1); } .cfg__sw:nth-child(3) { --s: var(--st2); } .cfg__sw:nth-child(4) { --s: var(--st3); }
.cfg__len { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; font: 600 13px/1 var(--font); text-transform: uppercase; letter-spacing: .05em; }
.cfg__seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.cfg__seg button { min-height: 44px; border-radius: 999px; font: 500 15px/1 var(--font); transition: background-color .25s, color .25s; }
.cfg__seg [aria-checked="true"] { background: var(--paper); color: var(--navy); }
.cfg__price { display: flex; align-items: baseline; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .18); }
.cfg__price span { font: 600 13px/1 var(--font); text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .85); }
.cfg__price b { font: 600 34px/1 var(--font); font-variant-numeric: tabular-nums; }

/* 02 motion: particle type */
.pt__c { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-x pan-y; }
.pt__btn { position: absolute; left: 20px; bottom: 18px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55); font: 600 15px/1 var(--font); transition: background-color .2s, color .2s; }
@media (hover: hover) and (pointer: fine) { .pt__btn:hover { background: var(--paper); color: var(--wine); } }
.pt__hint { position: absolute; left: 20px; top: 18px; font: 500 14px/1.2 var(--font); color: rgba(255, 255, 255, .85); }

/* 03 booking */
.bk { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.bk__app { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px -20px rgba(26, 16, 48, .45); }
.bk__t { display: flex; align-items: baseline; justify-content: space-between; font: 600 22px/1 var(--font); }
.bk__t span { font: 600 13px/1 var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .05em; color: rgba(26, 16, 48, .8); }
.bk__days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bk__days button { display: grid; gap: 2px; padding: 6px 0; min-height: 48px; border-radius: 10px; font: 600 17px/1 var(--font); transition: background-color .25s, color .25s; }
.bk__days span { font-size: 13px; font-weight: 500; }
.bk__days [aria-checked="true"] { background: var(--navy); color: var(--paper); }
.bk__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bk__slots button { min-height: 44px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(26, 16, 48, .25); font: 500 15px/1 var(--font); transition: background-color .25s, color .25s, box-shadow .25s; }
.bk__slots button:disabled { color: rgba(26, 16, 48, .45); text-decoration: line-through; box-shadow: none; background: rgba(26, 16, 48, .05); }
.bk__slots [aria-checked="true"] { background: var(--wine); color: var(--paper); box-shadow: none; }
.bk__go { min-height: 46px; border-radius: 10px; background: var(--navy); color: var(--paper); font: 600 15px/1 var(--font); transition: background-color .3s, opacity .3s; }
.bk__go:disabled { opacity: .55; }
.bk__go.ok { background: #0E7A52; opacity: 1; }
.bk__adm { flex: 1; min-height: 0; overflow: hidden; padding: 12px 14px; border-radius: 14px; background: var(--navy); color: var(--paper); }
.bk__ah { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font: 600 13px/1.3 var(--font); text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .85); }
.bk__ah b { color: var(--ember); }
.bk__list li { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 15px; }
.bk__list b { font-weight: 600; }
.bk__list i { font-style: normal; font-size: 13px; padding: 3px 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.bk__list li.new { animation: rowin .7s var(--out) both; }
.bk__list li.new i { background: var(--ember); color: var(--navy); }
@keyframes rowin { from { opacity: 0; transform: translateY(-10px); background: rgba(173, 150, 241, .35); } to { background: transparent; } }
.sh__toast { position: absolute; left: 50%; z-index: 8; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--navy); color: var(--paper); font: 600 14px/1 var(--font); white-space: nowrap; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); opacity: 0; transition: transform .6s var(--out), opacity .3s; pointer-events: none; }
.sh__toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 04 design system: two tokens drive the whole card */
@property --ac { syntax: '<color>'; inherits: true; initial-value: #5B3FC4; }
@property --rad { syntax: '<length>'; inherits: true; initial-value: 10px; }
.ds { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 20px; --ac: #5B3FC4; --rad: 10px; transition: --ac .7s var(--out2), --rad .35s var(--out2); }
.ds__card { display: grid; gap: 14px; padding: 18px; border-radius: calc(var(--rad) * 1.4); background: #fff; color: var(--navy); font-size: 15px; }
.ds__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ds__row b { font-weight: 600; font-size: 16px; }
.ds__badge { padding: 5px 10px; border-radius: var(--rad); background: color-mix(in srgb, var(--ac) 14%, transparent); color: var(--ac); font: 600 13px/1 var(--font); }
.ds__prog { display: grid; gap: 6px; }
.ds__prog span { font-size: 14px; color: rgba(26, 16, 48, .8); }
.ds__prog i { height: 8px; border-radius: var(--rad); background: rgba(26, 16, 48, .1); overflow: hidden; }
.ds__prog b { display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--ac); }
.ds__tog { display: flex; justify-content: space-between; align-items: center; }
.ds__sw { position: relative; width: 44px; height: 26px; border-radius: max(var(--rad), 4px); background: var(--ac); }
.ds__sw::after { content: ''; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: max(calc(var(--rad) - 2px), 2px); background: #fff; }
.ds__in { padding: 11px 14px; border-radius: var(--rad); box-shadow: inset 0 0 0 1.5px var(--ac), 0 0 0 4px color-mix(in srgb, var(--ac) 16%, transparent); }
.ds__btns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.ds__btns span { display: grid; place-items: center; min-height: 44px; border-radius: var(--rad); font-weight: 600; }
.ds__b1 { background: var(--ac); color: #fff; }
.ds__b2 { box-shadow: inset 0 0 0 1.5px var(--ac); color: var(--ac); }
.ds__ui { display: grid; gap: 6px; }
.ds__acs { display: flex; gap: 10px; }
.ds__acs button { width: 44px; height: 44px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); transition: box-shadow .2s; }
.ds__acs [aria-checked="true"] { box-shadow: 0 0 0 3px var(--navy), 0 0 0 5px var(--paper); }
.ds__rad { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; font: 600 13px/1 var(--font); text-transform: uppercase; letter-spacing: .05em; }
.ds__tok { font: 400 13px/1.4 ui-monospace, 'SFMono-Regular', Consolas, monospace; color: rgba(255, 255, 255, .85); }
.ds__tok b { font-weight: 400; color: var(--ember); }

/* 05 shop */
.sh { display: flex; flex-direction: column; padding: 16px 20px 18px; }
.sh__top { display: flex; justify-content: space-between; align-items: center; font: 600 26px/1 var(--font); }
.sh__cart { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--paper); }
.sh__cart svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sh__cart i { position: absolute; right: -4px; top: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px; background: var(--wine); color: var(--paper); font: 600 13px/22px var(--font); font-style: normal; text-align: center; }
.sh__cart i.bump { animation: bump .5s var(--out2); }
@keyframes bump { 40% { scale: 1.45; } }
.sh__pic { flex: 1; min-height: 0; display: grid; place-items: center; }
.sh__mug { width: auto; height: min(100%, 230px); --g: #c9a77d; }
.sh__glaze { fill: var(--g); stroke: var(--g); transition: fill .5s, stroke .5s; }
.sh__glaze:first-of-type { fill: none; }
.sh__info { display: grid; gap: 12px; }
.sh__name { font: 600 26px/1.1 var(--font); }
.sh__name span { display: block; margin-top: 4px; font: 400 15px/1.3 var(--font); font-style: normal; color: rgba(26, 16, 48, .8); }
.sh__gl { display: flex; gap: 10px; }
.sh__gl button { width: 44px; height: 44px; border-radius: 50%; background: var(--g); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .18); transition: box-shadow .2s; }
.sh__gl [aria-checked="true"] { box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .18), 0 0 0 3px #fff, 0 0 0 5px var(--navy); }
.sh__buy { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sh__buy b { font: 600 32px/1 var(--font); }
.sh__pr small { display: block; margin-bottom: 6px; font: 600 13px/1 var(--font); text-transform: uppercase; letter-spacing: .05em; color: rgba(26, 16, 48, .8); }
.sh__add { min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--navy); color: var(--paper); font: 600 16px/1 var(--font); transition: background-color .2s; }
@media (hover: hover) and (pointer: fine) { .sh__add:hover { background: var(--wine); } }
.sh__toast { top: 72px; transform: translate(-50%, -20px); }
.fly { position: fixed; z-index: 60; pointer-events: none; }

/* 06 AI chat */
.ai { padding: 16px; }
.ai__win { display: flex; flex-direction: column; height: 100%; border-radius: 16px; background: #fff; color: var(--navy); overflow: hidden; }
.ai__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid rgba(26, 16, 48, .1); font-weight: 600; }
.ai__head i { width: 9px; height: 9px; border-radius: 50%; background: #2f8f62; box-shadow: 0 0 0 3px rgba(47, 143, 98, .2); }
.ai__head span { margin-left: auto; font-size: 13px; font-weight: 500; color: rgba(26, 16, 48, .8); }
.ai__log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.ai__m { max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--bone); font-size: 16px; line-height: 1.45; animation: msg .45s var(--out) both; }
.ai__m--me { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--wine); color: var(--paper); }
.ai__m a { display: inline-block; padding: 12px 6px; margin: -12px -6px; color: var(--wine); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@keyframes msg { from { opacity: 0; transform: translateY(8px); } }
.ai__dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.ai__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(26, 16, 48, .55); animation: dot 1s infinite; }
.ai__dots i:nth-child(2) { animation-delay: .15s; } .ai__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { transform: translateY(-4px); opacity: .5; } }