/* =========================================================
   Tvorba – sprievodca v 4 krokoch
   ========================================================= */
.page-tvorba { background: var(--cream); }
.page-tvorba .nav { --nav-bg: var(--cream); }
.wz { padding-top: var(--nav-h); min-height: 100svh; }
.wz__bar { position: sticky; top: var(--nav-h); z-index: 50; background: var(--cream); border-bottom: 2px solid var(--line-2); }
.wz__steps { width: var(--wrap); margin-inline: auto; display: flex; gap: 6px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.wz__steps li { flex: 1; min-width: max-content; display: flex; align-items: center; gap: .55rem; padding: .55rem .9rem; border-radius: 14px; font-weight: 700; font-size: .92rem; color: var(--ink-3); cursor: default; transition: background-color .2s, color .2s; }
.wz__steps b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cream-2); color: var(--ink-2); font-size: .8rem; flex: none; }
.wz__steps li.ok { color: var(--ink); cursor: pointer; }
.wz__steps li.ok b { background: #2EAA62; color: #fff; }
.wz__steps li.ok:hover { background: #fff; }
.wz__steps li.on { background: var(--ink); color: #fff; }
.wz__steps li.on b { background: var(--yellow); color: var(--ink); }
[data-pane] { display: none; }
.wz[data-step="start"] [data-pane="start"], .wz[data-step="choose"] [data-pane="choose"], .wz[data-step="order"] [data-pane="order"] { display: block; animation: paneIn .45s var(--ease) both; }
.wz[data-step="edit"] [data-pane="edit"] { display: grid; animation: paneIn .45s var(--ease) both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(14px); } }

/* ---------- 1 ---------- */
.st1 { padding: clamp(2rem, 5vw, 3.5rem) 0 var(--sec); }
.st1__h { margin-bottom: 2rem; }
.resume { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem .8rem .8rem; border-radius: 20px; background: #fff; box-shadow: var(--sh); margin-bottom: 1.4rem; max-width: 640px; }
.resume img { width: 110px; aspect-ratio: 90/50; object-fit: cover; border-radius: 6px; box-shadow: 0 6px 14px -6px rgba(15, 20, 64, .4); }
.resume b { display: block; } .resume span { font-size: .88rem; color: var(--ink-2); }
.resume .btn { margin-left: auto; }
.ways { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 22px; }
.way { position: relative; display: flex; flex-direction: column; text-align: left; padding: 1.8rem; border-radius: 30px; background: #fff; box-shadow: 0 0 0 3px var(--ink), 8px 9px 0 var(--ink); transition: transform .3s var(--pop), box-shadow .3s var(--pop); min-height: 380px; }
.way:hover { transform: translate(-2px, -3px); box-shadow: 0 0 0 3px var(--ink), 10px 12px 0 var(--ink); }
.way h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.way p { margin-top: .7rem; color: var(--ink-2); font-weight: 500; }
.way .link { margin-top: auto; align-self: flex-start; }
.way--ai { background: var(--cobalt); color: #fff; }
.way--ai:hover { transform: none; }
.way--ai p { color: rgba(255, 255, 255, .85); }
.way__tag { position: absolute; top: -14px; right: 22px; padding: .35rem .8rem; border-radius: 99px; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: .8rem; transform: rotate(3deg); box-shadow: 0 0 0 3px var(--ink); }
.way--ai .ask { margin-top: auto; }
.ask { display: flex; gap: 8px; align-items: flex-end; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 6px 0 rgba(10, 20, 100, .35); margin-top: 1.4rem; }
.ask textarea, .ask input { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.4; padding: 6px 8px; max-height: 140px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .9rem; }
.chips button { padding: .4rem .8rem; border-radius: 99px; font-size: .84rem; font-weight: 700; background: rgba(255, 255, 255, .14); color: #fff; transition: background-color .15s, transform .2s var(--pop); }
.chips button:hover { background: var(--yellow); color: var(--ink); transform: rotate(-2deg); }
.way__note { margin-top: .9rem; font-size: .78rem; line-height: 1.45; opacity: .75; }
.way__note a { color: inherit; text-decoration: underline; }
.way__thumbs { position: relative; aspect-ratio: 2 / 1; margin-bottom: 1.2rem; }
.way__thumbs img { position: absolute; width: 70%; height: auto; aspect-ratio: 90/50; object-fit: cover; border-radius: 3px; box-shadow: var(--card-sh); background: #EEF0FA; }
.way__thumbs img:nth-child(1) { left: 0; top: 18px; transform: rotate(-6deg); }
.way__thumbs img:nth-child(2) { left: 15%; top: 4px; transform: rotate(1deg); z-index: 2; }
.way__thumbs img:nth-child(3) { right: 0; top: 30px; transform: rotate(6deg); }
.way--tpl:hover .way__thumbs img:nth-child(1) { transform: rotate(-10deg) translateX(-6px); }
.way--tpl:hover .way__thumbs img:nth-child(3) { transform: rotate(10deg) translateX(6px); }
.way__thumbs img { transition: transform .4s var(--pop); }
.way--file { background: var(--yellow); }
.way__file { display: flex; gap: 8px; height: 150px; align-items: center; margin-bottom: 1.2rem; }
.way__file span { width: 74px; height: 92px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 2.5px var(--ink); display: grid; place-items: end center; padding-bottom: 12px; font-weight: 800; font-size: .86rem; position: relative; }
.way__file span::before { content: ''; position: absolute; top: 14px; left: 14px; right: 14px; height: 4px; border-radius: 2px; background: var(--ink); opacity: .2; box-shadow: 0 9px 0 rgba(15, 20, 64, 1), 0 18px 0 rgba(15, 20, 64, 1); }
.way__file span:nth-child(1) { transform: rotate(-6deg); } .way__file span:nth-child(3) { transform: rotate(6deg); }

/* ---------- 2 ---------- */
.st2 { padding: clamp(1.6rem, 4vw, 3rem) 0 var(--sec); }
.ai__prompt { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ai__me { display: inline-block; padding: .8rem 1.1rem; border-radius: 20px 20px 6px 20px; background: var(--cobalt); color: #fff; font-weight: 700; font-size: 1.05rem; max-width: 60ch; }
.ai__load { display: grid; justify-items: center; gap: 12px; padding: 4rem 0; text-align: center; }
.ai__load b { font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -.04em; }
.ai__load small { color: var(--ink-3); font-weight: 600; }
.dots { display: inline-flex; gap: 8px; }
.dots i { width: 13px; height: 13px; border-radius: 50%; background: var(--coral); display: block; animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; background: var(--yellow); } .dots i:nth-child(3) { animation-delay: .3s; background: var(--cobalt); }
@keyframes dot { 50% { transform: translateY(-8px); } }
.ai__intro { margin: 1.4rem 0 1.6rem; font-weight: 700; font-size: 1.12rem; max-width: 70ch; }
.mocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mock { display: grid; gap: 14px; text-align: left; animation: mockIn .7s var(--pop) both; }
.mock:nth-child(2) { animation-delay: .1s; } .mock:nth-child(3) { animation-delay: .2s; }
@keyframes mockIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.mock__scene { position: relative; aspect-ratio: 5/4; border-radius: 26px; overflow: hidden; background: var(--scene, #E9E2D6); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); transition: transform .4s var(--pop); }
.mock__scene::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .55), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mock__scene::after { content: ''; position: absolute; inset: -4% -6%; z-index: 3; pointer-events: none; background: url('../img/shadow-leaf.png') left top / 120% auto no-repeat; mix-blend-mode: multiply; opacity: .9; }
.mock[data-i="1"] .mock__scene::after { background-image: url('../img/shadow-leaf-2.png'); background-position: right top; }
.mock[data-i="2"] .mock__scene::after { background-position: left bottom; transform: rotate(180deg); }
.mock__scene img { position: absolute; width: 72%; aspect-ratio: 90/50; object-fit: cover; border-radius: 3px; transition: transform .6s var(--pop); background: rgba(255, 255, 255, .5); }
.mock__back { left: 22%; top: 12%; transform: rotate(9deg); box-shadow: var(--card-sh); filter: brightness(.97); }
.mock__front { left: 6%; top: 36%; transform: rotate(-5deg); box-shadow: var(--card-sh); }
.mock:hover .mock__scene { transform: translateY(-4px); }
.mock:hover .mock__front { transform: rotate(-2deg) translate(-4px, -6px); }
.mock:hover .mock__back { transform: rotate(12deg) translate(8px, -4px); }
.mock__pend { position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: .35rem .7rem; border-radius: 99px; background: #fff; font-size: .76rem; font-weight: 800; box-shadow: var(--sh); }
.mock__pend .dots i { width: 6px; height: 6px; }
.mock__dir { position: absolute; right: 14px; top: 14px; z-index: 3; padding: .3rem .7rem; border-radius: 99px; background: var(--ink); color: #fff; font-size: .74rem; font-weight: 800; }
.mock__info { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.mock__info small { font-size: .86rem; color: var(--ink-2); font-weight: 600; line-height: 1.35; }
.mock__info .btn { flex: none; }
.ai__more { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ai__more span { font-weight: 800; margin-right: 6px; }
.ai__more button { padding: .55rem 1rem; border-radius: 99px; background: #fff; font-weight: 700; font-size: .9rem; box-shadow: var(--sh); transition: transform .2s var(--pop); }
.ai__more button:hover { transform: translateY(-2px) rotate(-1deg); background: var(--yellow); }
.ask--re { max-width: 720px; box-shadow: 0 0 0 2.5px var(--ink); }
.tpl h2 { margin-bottom: 1rem; }
.filt { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.4rem; }
.filt--ind { margin-bottom: .6rem; }
.filt.filt--ind button { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.filt.filt--ind button.on { background: var(--cobalt); color: #fff; box-shadow: none; }
.tpl__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 1.2rem; }
.tpl__head h2 small { font-size: .9rem; font-family: var(--mono); font-weight: 500; letter-spacing: 0; color: var(--ink-3); vertical-align: middle; margin-left: .3rem; }
.tpl__name { display: grid; gap: .3rem; width: min(100%, 340px); }
.tpl__name span { font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.tpl__name input { min-height: 48px; border: 0; border-radius: 14px; padding: .7rem 1rem; background: #fff; box-shadow: var(--sh), inset 0 0 0 2px transparent; font-weight: 700; font-size: 1rem; outline: 0; }
.tpl__name input:focus { box-shadow: var(--sh), inset 0 0 0 2px var(--cobalt); }
.tgrid button { position: relative; }
.tgrid em { position: absolute; top: 10px; left: 10px; font-style: normal; font-size: .7rem; font-weight: 800; padding: .25rem .55rem; border-radius: 99px; background: var(--yellow); box-shadow: 0 2px 0 rgba(15, 20, 64, .3); }
.tgrid__none { grid-column: 1 / -1; padding: 3rem 0; text-align: center; color: var(--ink-2); font-weight: 600; }
.filt button { padding: .5rem 1rem; border-radius: 99px; font-weight: 700; font-size: .9rem; background: #fff; box-shadow: var(--sh); }
.filt button.on { background: var(--ink); color: #fff; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.tgrid button { display: grid; gap: 8px; text-align: left; }
.tgrid img { width: 100%; aspect-ratio: 90/50; object-fit: cover; border-radius: 3px; background: #EEF0FA; box-shadow: var(--card-sh); transition: transform .35s var(--pop); }
.tgrid button:hover img { transform: translateY(-4px) rotate(-1deg); }
.tgrid span { font-weight: 800; font-size: .95rem; }

/* ---------- 3 ---------- */
.st3 { grid-template-columns: 380px minmax(0, 1fr); height: calc(100svh - var(--nav-h) - 59px); }
.ed-side { display: flex; flex-direction: column; min-height: 0; background: #fff; border-right: 2px solid var(--line-2); }
.ed-tabs { display: flex; gap: 4px; padding: 10px; border-bottom: 2px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.ed-tabs button { flex: 1; white-space: nowrap; padding: .6rem .7rem; border-radius: 12px; font-weight: 800; font-size: .88rem; color: var(--ink-2); transition: background-color .15s, color .15s; }
.ed-tabs button:hover { background: #F3F4FB; }
.ed-tabs button[aria-selected=true] { background: var(--ink); color: #fff; }
.ed-panels { position: relative; flex: 1; min-height: 0; }
.pn { position: absolute; inset: 0; overflow-y: auto; padding: 18px 20px 40px; display: none; scrollbar-width: thin; }
.pn.on { display: block; animation: paneIn .3s var(--ease); }
.pn h3 { font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 10px; }
.pn h3:first-child { margin-top: 0; }
.pn__tip { font-size: .86rem; font-weight: 600; color: var(--ink-2); padding: .7rem .9rem; border-radius: 14px; background: var(--cream); margin-bottom: 14px; }
.fields { display: grid; gap: 10px; }
.fld { display: grid; gap: 4px; }
.fld > span { font-size: .78rem; font-weight: 700; color: var(--ink-2); padding-left: 3px; }
.fld input, .slug { width: 100%; height: 48px; border: 0; border-radius: 14px; padding: 0 14px; background: #F3F4FB; box-shadow: inset 0 0 0 2px transparent; font-size: 1rem; font-weight: 600; outline: 0; transition: box-shadow .15s, background-color .15s; }
.fld input:focus, .slug:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--cobalt); }
.slug { display: flex; align-items: center; }
.slug em { font-style: normal; color: var(--ink-3); font-size: .86rem; white-space: nowrap; }
.slug input { height: 100%; padding: 0 0 0 1px; background: transparent !important; box-shadow: none !important; }
.more { margin-top: 16px; border-radius: 16px; background: #F7F8FC; padding: 0 14px; }
.more summary { cursor: pointer; list-style: none; padding: 14px 0; font-weight: 800; font-size: .92rem; display: flex; justify-content: space-between; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: '+'; font-size: 1.2rem; line-height: 1; transition: transform .3s var(--pop); }
.more[open] summary::after { transform: rotate(45deg); }
.more > :not(summary) { margin-bottom: 12px; }
.up { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: #fff; }
.up img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.up img:not([src]) { display: none; }
.x { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; font-size: 1.2rem; color: var(--ink-3); }
.pals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pal { display: grid; gap: 4px; justify-items: center; font-size: .68rem; font-weight: 700; color: var(--ink-2); }
.pal i { width: 100%; height: 40px; border-radius: 12px; display: grid; grid-template-columns: 2fr 1fr 1fr; overflow: hidden; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .08); transition: transform .2s var(--pop); }
.pal:hover i { transform: translateY(-2px); }
.pal.on i { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--cobalt); }
.cpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-bottom: 6px; }
.cpick label { display: grid; justify-items: center; gap: 5px; font-size: .7rem; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.cpick input { width: 44px; height: 44px; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; }
.cpick input::-webkit-color-swatch-wrapper { padding: 0; }
.cpick input::-webkit-color-swatch { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .1); }
.warn { margin-top: 10px; font-size: .84rem; font-weight: 600; padding: .6rem .8rem; border-radius: 12px; background: #FFF1D6; color: #8A5300; }
.fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.font { display: grid; gap: 1px; padding: 10px 12px; border-radius: 14px; text-align: left; background: #F3F4FB; transition: box-shadow .15s, background-color .15s; }
.font b { font-size: 1.45rem; line-height: 1.1; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.font small { font-size: .7rem; color: var(--ink-3); font-weight: 700; }
.font.on { background: #fff; box-shadow: inset 0 0 0 2px var(--cobalt); }
.backs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.backs button { display: grid; gap: 5px; text-align: left; font-size: .76rem; font-weight: 700; color: var(--ink-2); }
.backs img { width: 100%; aspect-ratio: 90/50; object-fit: cover; border-radius: 6px; background: #EEF0FA; box-shadow: 0 6px 12px -6px rgba(15, 20, 64, .35); }
.backs button.on img { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--cobalt); }
.drop { display: grid; place-items: center; text-align: center; min-height: 130px; padding: 1rem; border-radius: 18px; cursor: pointer; background: #F3F4FB; box-shadow: inset 0 0 0 2px var(--line); position: relative; font-weight: 800; transition: box-shadow .15s; }
.drop:hover, .drop.over { box-shadow: inset 0 0 0 2px var(--cobalt); }
.drop img { max-width: 80%; max-height: 80px; object-fit: contain; }
.drop img:not([src]) { display: none; }
.drop small { display: block; font-weight: 600; font-size: .76rem; color: var(--ink-3); margin-top: .2rem; }
.drop.has > span { position: absolute; bottom: 8px; font-size: .74rem; font-weight: 600; color: var(--ink-3); }
.drop.has > span small { display: none; }
.sw { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: .84rem; font-weight: 700; }
.sw i { width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08); }
.markbox { display: grid; gap: 10px; justify-items: start; }
.markbox img { width: 96px; height: 96px; object-fit: contain; padding: 12px; border-radius: 18px; background: #F3F4FB; }
.markbox img:not([src]) { display: none; }
.ask--mark { width: 100%; margin: 0; box-shadow: inset 0 0 0 2px var(--line); }
.adds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.adds button { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 16px; background: #F3F4FB; font-size: .8rem; font-weight: 800; transition: background-color .15s, transform .2s var(--pop); }
.adds button:hover { background: #E6E9FB; transform: translateY(-2px); }
.adds b { display: grid; place-items: center; width: 40px; height: 30px; }
.a-t { font-size: 1.2rem; font-weight: 600; }
.a-r::before { content: ''; width: 30px; height: 22px; border-radius: 4px; background: var(--cobalt); }
.a-c::before { content: ''; width: 26px; height: 26px; border-radius: 50%; background: var(--coral); }
.a-l::before { content: ''; width: 30px; height: 3px; border-radius: 2px; background: var(--ink); }
.a-q::before { content: ''; width: 26px; height: 26px; background: conic-gradient(var(--ink) 25%, #fff 0 50%, var(--ink) 0 75%, #fff 0) 0 0 / 9px 9px; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--ink); }
.a-i::before { content: ''; width: 30px; height: 24px; border-radius: 4px; background: linear-gradient(160deg, var(--yellow) 0 45%, var(--mint) 45%); }
.icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.icons button { aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; background: #F3F4FB; transition: background-color .15s, transform .2s var(--pop); }
.icons button:hover { background: #E6E9FB; transform: translateY(-2px); }
.icons svg { width: 22px; height: 22px; }
.arts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.arts button { aspect-ratio: 1; border-radius: 12px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .08); }
.arts button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cobalt); }
.arts .none { display: grid; place-items: center; font-size: .7rem; font-weight: 800; background: #F3F4FB; }
.tb { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #fff; box-shadow: var(--sh); color: var(--ink); }
.tb svg { width: 20px; height: 20px; }
.tb[disabled] { opacity: .35; pointer-events: none; }
.tb--txt { padding: 0 .9rem; font-size: .86rem; font-weight: 800; }
.tb--full { width: 100%; margin-top: 20px; }
.tb[aria-pressed=true] { background: var(--ink); color: #fff; }
.ed-stage { position: relative; min-height: 0; display: flex; flex-direction: column; background: radial-gradient(circle, rgba(15, 20, 64, .12) 1px, transparent 1.4px) 0 0 / 22px 22px, #EEF0FA; }
.ed-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 0; position: relative; z-index: 6; }
.ed-hist { display: flex; gap: 6px; }
.seg { display: inline-flex; padding: 4px; border-radius: 14px; background: #fff; box-shadow: var(--sh); }
.seg button { padding: .5rem 1rem; border-radius: 10px; font-size: .9rem; font-weight: 800; color: var(--ink-2); }
.seg button.on { background: var(--ink); color: #fff; }
.ed-canvas { flex: 1; min-height: 0; display: grid; place-items: center; }
.ed-canvas .canvas-container { border-radius: 6px; box-shadow: 0 2px 4px rgba(15, 20, 64, .08), 0 30px 60px -24px rgba(15, 20, 64, .45); }
.ed-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 18px 16px; position: relative; z-index: 6; }
.ctx { position: absolute; left: 50%; top: 66px; z-index: 8; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 2px 4px rgba(15, 20, 64, .08), 0 14px 34px -10px rgba(15, 20, 64, .35); max-width: calc(100% - 24px); }
.ctx__g { display: flex; align-items: center; gap: 3px; padding: 0 4px; }
.ctx__g + .ctx__g { border-left: 1.5px solid var(--line-2); }
.ctx__font { height: 36px; max-width: 150px; border: 0; border-radius: 10px; background: #F3F4FB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%230F1440' stroke-width='1.6'/%3E%3C/svg%3E") right 8px center / 11px no-repeat; padding: 0 26px 0 10px; font-weight: 700; font-size: .86rem; appearance: none; cursor: pointer; }
.ctx__size { display: flex; align-items: center; height: 36px; border-radius: 10px; background: #F3F4FB; }
.ctx__size button { width: 28px; height: 36px; font-weight: 800; }
.ctx__size input { width: 38px; height: 36px; border: 0; background: transparent; text-align: center; font-weight: 800; font-size: .86rem; outline: 0; }
.ctx__b { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; font-size: .9rem; font-weight: 800; }
.ctx__b:hover { background: #F3F4FB; }
.ctx__b.on { background: var(--ink); color: #fff; }
.ctx__b svg { width: 18px; height: 18px; }
.ctx__wide { padding: 0 .8rem; }
.ctx__del:hover { background: #FFE4DD; color: var(--coral-2); }
.ctx__colors { gap: 5px; }
.ctx__colors button, .ctx__colors label { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .12); position: relative; cursor: pointer; }
.ctx__colors button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--cobalt); }
.ctx__colors label { background: conic-gradient(#FF4D4D, #FFD23F, #4DD87A, #3A7BFF, #B04DFF, #FF4D4D); }
.ctx__colors label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ctx__pop { position: relative; }
.pop { position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 14px 34px -10px rgba(15, 20, 64, .35), 0 0 0 1px var(--line-2); display: none; z-index: 2; font-size: .86rem; font-weight: 700; }
.pop.on { display: grid; }
.pop button { text-align: left; padding: .55rem .7rem; border-radius: 9px; }
.pop button:hover { background: #F3F4FB; }
.pop hr { border: 0; border-top: 1px solid var(--line-2); margin: 4px 0; }
.pop__row { display: grid; gap: 6px; padding: .55rem .7rem; }
.pop input[type=range] { width: 100%; accent-color: var(--cobalt); }

/* ---------- 4 ---------- */
.st4 { padding: clamp(1.6rem, 4vw, 3rem) 0 var(--sec); }
.st4__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.st4__vis { position: sticky; top: calc(var(--nav-h) + 80px); display: grid; gap: 14px; justify-items: start; }
.st4__views { background: #fff; }
.st4__stage { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 30px; overflow: hidden; background: #E6DFD3; box-shadow: 0 30px 60px -30px rgba(40, 28, 15, .5); }
.st4__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st4__img.in { animation: v4in .5s var(--ease); }
@keyframes v4in { from { opacity: .3; transform: scale(1.015); } }
.st4__busy { position: absolute; right: 16px; top: 16px; padding: .5rem .7rem; border-radius: 99px; background: rgba(255, 255, 255, .85); }
.st4__busy[hidden] { display: none; }
.st4__3d { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 0%, #fff, #E9EBF7 70%); }
.st4__3d[hidden] { display: none; }
.st4__scenes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st4__scenes span { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.st4__scenes button { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(15, 20, 64, .25); transition: transform .2s var(--pop); }
.st4__scenes button:hover { transform: scale(1.1); }
.st4__scenes button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cobalt); }
.pf { width: 100%; padding: 1rem 1.2rem; border-radius: 20px; background: #fff; box-shadow: var(--sh); }
.pf__h { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.pf__h b { font-size: 1.05rem; letter-spacing: -.02em; }
.pf__h span { font-size: .78rem; font-weight: 700; padding: .3rem .7rem; border-radius: 99px; background: #EEF0FA; color: var(--ink-2); }
.pf.ok .pf__h span { background: #DDF5E7; color: #1D7A45; }
.pf.warn .pf__h span { background: #FFF1D6; color: #8A5300; }
.pf ul { display: grid; gap: 2px; }
.pf li { display: grid; grid-template-columns: 22px 1fr auto; gap: .6rem; align-items: center; padding: .38rem 0; font-size: .88rem; font-weight: 500; color: var(--ink-2); }
.pf li i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .7rem; font-weight: 800; background: #DDF5E7; color: #1D7A45; }
.pf li.warn { color: var(--ink); font-weight: 600; }
.pf li.warn i { background: var(--yellow); color: var(--ink); }
.pf li button { font-size: .78rem; font-weight: 800; padding: .35rem .7rem; border-radius: 10px; background: var(--ink); color: #fff; white-space: nowrap; }
.st4__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); z-index: 2; pointer-events: none; }
.st4__thumbs { display: flex; gap: 10px; }
.st4__thumbs img { width: 140px; aspect-ratio: 90/50; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 16px -8px rgba(15, 20, 64, .4); background: #EEF0FA; }
.st4__opts h3 { font-family: var(--mono); font-weight: 500; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 10px; }
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kind { display: grid; gap: 2px; text-align: left; padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--sh); transition: box-shadow .15s; }
.kind b { font-weight: 800; font-size: .94rem; letter-spacing: -.02em; line-height: 1.2; }
.kind small { font-size: .78rem; color: var(--ink-2); font-weight: 600; }
.kind.on { box-shadow: 0 0 0 3px var(--ink), 4px 5px 0 var(--ink); }
.papers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.paper { display: grid; gap: 2px; text-align: left; padding: 14px 12px; border-radius: 18px; background: #fff; box-shadow: var(--sh); transition: box-shadow .15s, transform .2s var(--pop); }
.paper:hover { transform: translateY(-2px); }
.paper.on { box-shadow: 0 0 0 3px var(--ink), 4px 5px 0 var(--ink); }
.paper__sw { width: 54px; height: 32px; border-radius: 4px; background: #F4F0E8; box-shadow: 0 1px 0 #D9D2C3, 0 2px 0 #D9D2C3, 0 6px 10px -4px rgba(0, 0, 0, .3); margin-bottom: 8px; }
.paper__sw--soft { background: linear-gradient(135deg, #3B3A40, #2A292E); box-shadow: 0 1px 0 #1A1A1F, 0 2px 0 #1A1A1F, 0 6px 10px -4px rgba(0, 0, 0, .35); }
.paper__sw--tri { background: #F4F0E8; box-shadow: 0 1px 0 #D9D2C3, 0 2px 0 var(--coral), 0 3px 0 var(--coral), 0 4px 0 #D9D2C3, 0 8px 12px -4px rgba(0, 0, 0, .35); }
.paper b { font-weight: 800; font-size: 1rem; }
.paper small { font-size: .78rem; color: var(--ink-2); font-weight: 600; }
.paper em { font-style: normal; font-weight: 800; font-size: .86rem; margin-top: 6px; color: var(--cobalt); }
.qty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qty button { display: grid; gap: 1px; padding: 10px 4px; border-radius: 16px; background: #fff; box-shadow: var(--sh); }
.qty b { font-weight: 800; font-size: 1.1rem; }
.qty small { font-size: .78rem; color: var(--ink-3); font-weight: 700; }
.qty button.on { background: var(--ink); color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .35); }
.qty button.on small { color: rgba(255, 255, 255, .75); }
.st4 .more { margin-top: 18px; background: #fff; }
.opt { display: grid; gap: 6px; }
.opt > span { font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.seg--s { box-shadow: none; background: #F3F4FB; width: 100%; padding: 3px; }
.seg--s button { flex: 1; min-width: 0; padding: .5rem .3rem; font-size: .84rem; }
.tog { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .9rem; cursor: pointer; }
.tog input { width: 19px; height: 19px; accent-color: var(--cobalt); }
.tog small { display: block; font-weight: 600; color: var(--ink-3); font-size: .76rem; }
.sum { margin-top: 22px; padding: 1.4rem; border-radius: 26px; background: var(--cobalt); color: #fff; box-shadow: 0 6px 0 var(--cobalt-2); }
.sum__p { display: flex; justify-content: space-between; align-items: baseline; }
.sum__p span { font-weight: 800; }
.sum__p b { font-size: clamp(2.6rem, 4vw, 3.4rem); letter-spacing: -.05em; line-height: 1; }
.sum__m { text-align: right; font-family: var(--mono); font-size: .76rem; opacity: .8; margin-top: 4px; }
.sum__d { margin-top: 12px; font-weight: 700; color: var(--yellow); }
.sum__d:empty { display: none; }
.sum__cta { width: 100%; margin-top: 14px; --b: var(--yellow); --fg: var(--ink); --sd: var(--yellow-2); }
.sum__vat { margin-top: 10px; font-size: .8rem; opacity: .8; text-align: center; }

/* ---------- responzívne ---------- */
@media (max-width: 1060px) {
  .ways { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .way--ai { grid-column: 1 / -1; min-height: 0; }
  .mocks { grid-template-columns: 1fr 1fr; }
  .st3 { grid-template-columns: 330px minmax(0, 1fr); }
  .st4__grid { grid-template-columns: 1fr; }
  .st4__vis { position: static; }
}
@media (max-width: 760px) {
  .wz__steps li span { display: none; }
  .wz__steps li.on span { display: inline; }
  .ways { grid-template-columns: minmax(0, 1fr); }
  .way { min-height: 0; }
  .way__thumbs { height: min(44vw, 190px); }
  .way__file { height: 110px; }
  .way--ai .ask { flex-direction: column; align-items: stretch; }
  .way--ai .ask textarea { min-height: 3.2em; }
  .way--ai .ask .btn { justify-content: center; }
  .mocks { grid-template-columns: 1fr; }
  .wz[data-step="edit"] .st3 { display: flex; flex-direction: column; height: auto; animation: none; }
  .ed-stage { order: 1; position: sticky; top: calc(var(--nav-h) + 51px); z-index: 5; height: 44svh; min-height: 300px; }
  .ed-top { padding: 8px 10px 0; }
  .ctx { top: 52px; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .ed-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px; background: var(--cream); box-shadow: 0 -10px 20px -12px rgba(15, 20, 64, .3); }
  .ed-foot .btn--lg { min-height: 52px; font-size: 1rem; padding: 0 1.1rem; }
  .ed-side { order: 2; border: 0; }
  .ed-tabs { position: sticky; top: calc(var(--nav-h) + 51px + max(44svh, 300px)); z-index: 4; background: #fff; }
  .pn { position: static; padding: 16px 16px 120px; overflow: visible; }
  .kinds, .papers { grid-template-columns: 1fr; }
  .paper { grid-template-columns: 64px 1fr auto; align-items: center; column-gap: 12px; }
  .paper__sw { grid-row: span 2; margin: 0; }
  .paper em { grid-row: span 2; grid-column: 3; margin: 0; }
  .kind { grid-template-columns: 1fr auto; align-items: center; }
}

/* fotografické mockupy */
.mock__scene.is-photo::before, .mock__scene.is-photo::after { display: none; }
.mock__scene.is-photo .mock__back { display: none; }
.mock__scene.is-photo .mock__front { inset: 0; left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; border-radius: 0; box-shadow: none; }
.mock:hover .mock__scene.is-photo .mock__front { transform: scale(1.02); }
.tgrid img { aspect-ratio: 640 / 461; border-radius: 14px; box-shadow: 0 1px 0 rgba(0,0,0,.04); }

@media (max-width: 700px) {
  .filt { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * (100vw - 100%) / 2); margin-right: calc(-1 * (100vw - 100%) / 2); padding: 4px calc((100vw - 100%) / 2) 8px; scrollbar-width: none; }
  .filt::-webkit-scrollbar { display: none; }
  .filt button { flex: 0 0 auto; }
  .tpl__name { width: 100%; }
}

.ed-price { margin-left: auto; margin-right: 1rem; display: grid; text-align: right; font-size: .82rem; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
.ed-price b { font-size: 1.25rem; color: var(--ink); letter-spacing: -.03em; }
.ed-price small { font-size: .72rem; color: #1D7A45; font-weight: 700; }
@media (max-width: 700px) { .ed-price { display: none; } }

/* vlastné údaje vo výbere */
.mine4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; align-items: end; padding: 1.1rem 1.2rem 1.2rem; margin: 0 0 1.4rem; border-radius: 22px; background: #fff; box-shadow: var(--sh); }
.mine4__h { grid-column: 1 / -1; font-size: 1.05rem; letter-spacing: -.02em; }
.mine4__h small { font-weight: 600; color: var(--ink-3); font-size: .86rem; letter-spacing: 0; margin-left: .3rem; }
.mine4 label { display: grid; gap: .25rem; }
.mine4 span { font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.mine4 input { min-height: 44px; border: 0; border-radius: 12px; padding: .6rem .8rem; background: #F3F4FB; font-weight: 700; font-size: .95rem; outline: 0; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s, background-color .15s; }
.mine4 input:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--cobalt); }
.mock.is-busy .mock__front { filter: blur(1.5px) saturate(.9); transition: filter .3s; }
@media (max-width: 900px) { .mine4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mine4 input { width: 100%; min-width: 0; }
@media (max-width: 380px) { .mine4 { grid-template-columns: minmax(0, 1fr); } }
.ed-save { margin-left: 1.2rem; color: var(--ink-2); }
.sum__save { justify-self: center; margin-top: 16px; color: #fff; opacity: .85; font-size: .88rem; transition: opacity .15s; }
.sum__save:hover { opacity: 1; }
.sum { display: grid; }
@media (max-width: 700px) { .ed-save { display: none; } }
.paper, .qty button { position: relative; }
.badge4 { position: absolute; top: -9px; right: 10px; padding: .18rem .5rem; border-radius: 99px; background: var(--coral); color: #fff; font-size: .64rem; font-weight: 800; letter-spacing: .01em; box-shadow: 0 2px 0 var(--coral-2); white-space: nowrap; }
.qty .badge4 { right: 50%; transform: translateX(50%); }
.skel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; margin-top: 2rem; }
.skel i { aspect-ratio: 5/4; border-radius: 26px; background: linear-gradient(100deg, #EFE6D6 30%, #FBF4E8 50%, #EFE6D6 70%) 0 0 / 300% 100%; animation: skel 1.4s linear infinite; }
.skel i:nth-child(2) { animation-delay: .15s; } .skel i:nth-child(3) { animation-delay: .3s; }
@keyframes skel { to { background-position: -150% 0; } }
@media (max-width: 900px) { .skel { grid-template-columns: 1fr; } .skel i + i { display: none; } }
@media (prefers-reduced-motion: reduce) { .skel i { animation: none; } }

/* ---------- web polish: nahrávanie, prepínače, neaktívne CTA ---------- */
.drop { box-shadow: none; border: 2px dashed rgba(15, 20, 64, .2); transition: border-color .15s, background-color .15s; }
.drop:hover, .drop.over { box-shadow: none; border-color: var(--cobalt); background: #EEF0FF; }
.drop.has { border-style: solid; border-color: var(--line); background: #F7F8FD; }
.drop:not(.has) > span::before { content: ''; display: block; width: 46px; height: 46px; margin: 0 auto .7rem; border-radius: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232440E6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M6 10l6-6 6 6M5 20h14'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 4px 0 rgba(15, 20, 64, .12); transition: transform .3s var(--pop); }
.drop:hover:not(.has) > span::before { transform: translateY(-3px); }
.drop:focus-within { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.tog { min-height: 44px; }
.tog input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 2px rgba(15, 20, 64, .28); cursor: pointer; transition: background-color .15s, box-shadow .15s, transform .2s var(--pop); }
.tog input:checked { background: var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: inset 0 0 0 2px var(--cobalt); transform: scale(1.05); }
.tog input:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.tog:hover input:not(:checked) { box-shadow: inset 0 0 0 2px var(--cobalt); }
.sum__cta[disabled] { opacity: 1; --b: rgba(255, 255, 255, .12); --fg: rgba(255, 255, 255, .88); --sd: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); font-size: 1rem; }
.own__backopt .seg button { white-space: nowrap; padding: .55rem .95rem; }
.seg button { transition: background-color .15s, color .15s; }
.seg button:not(.on):hover { color: var(--ink); background: rgba(15, 20, 64, .06); }
.seg button:focus-visible { outline: 3px solid var(--coral); outline-offset: 1px; }
/* galéria šablón: na mobile dve kolóny, rýchlejšie prechádzanie */
@media (max-width: 640px) {
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .tgrid img { border-radius: 10px; }
  .tgrid span { font-size: .84rem; }
  .tgrid em { top: 6px; left: 6px; font-size: .6rem; padding: .18rem .42rem; }
}
.tgrid button:focus-visible { outline: none; }
.tgrid button:focus-visible img { outline: 3px solid var(--cobalt); outline-offset: 3px; }

/* ===== Digitálna vizitka v úpravách: skupiny polí + živý náhľad v telefóne ===== */
.more--dig textarea { width: 100%; min-height: 76px; border: 0; border-radius: 14px; padding: 12px 14px; background: #F3F4FB; box-shadow: inset 0 0 0 2px transparent; font: 600 .95rem/1.45 inherit; font-family: inherit; color: inherit; resize: vertical; outline: 0; transition: box-shadow .15s, background-color .15s; }
.more--dig textarea:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--cobalt); }
.more--dig textarea::placeholder, .more--dig input::placeholder { color: #9AA0BD; font-weight: 500; }
.more--dig .dgp-h { margin: 18px 0 8px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3, #5F6488); }
.more--dig .dgp-tip { margin: 6px 0 4px; font-size: .8rem; line-height: 1.45; color: var(--ink-3, #5F6488); }
.dgp-open { display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0 6px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--ink, #0F1440); color: #fff; text-align: left; cursor: pointer; font: inherit; box-shadow: 0 10px 22px -14px rgba(15, 20, 64, .8); transition: transform .2s var(--pop, ease); }
.dgp-open:hover { transform: translateY(-1px); }
.dgp-open svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--yellow, #FFD23F); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dgp-open span { display: grid; line-height: 1.25; }
.dgp-open b { font-size: .92rem; }
.dgp-open small { font-size: .76rem; opacity: .7; font-weight: 500; }
.dgp, .dgp * { box-sizing: border-box; }
.dgp { position: fixed; z-index: 300; right: 20px; top: 150px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; width: 318px; padding: 12px 12px 14px; border-radius: 30px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 20, 64, .08), 0 40px 80px -30px rgba(15, 20, 64, .55); opacity: 0; transform: translateY(16px) scale(.98); transform-origin: top right; transition: opacity .25s, transform .35s var(--pop, ease); }
.dgp.on { opacity: 1; transform: none; }
.dgp[hidden] { display: none; }
.dgp__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 2px 4px 0 8px; }
.dgp__head b { flex: 1; font-size: .9rem; }
.dgp__live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 99px; background: #E9F8EF; color: #1D7A45; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dgp__live i { width: 6px; height: 6px; border-radius: 50%; background: #2EB872; animation: dgpPulse 1.8s infinite; }
@keyframes dgpPulse { 50% { opacity: .3; } }
.dgp__x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #F1F2F7; color: var(--ink, #0F1440); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.dgp__phone { width: 100%; height: min(580px, calc(100vh - 290px)); padding: 8px; border-radius: 38px; background: linear-gradient(145deg, #2F3140, #14151D 40%, #262836); box-shadow: inset 0 0 0 1.5px #474A5C, inset 0 0 0 3px #0B0B10; }
.dgp__screen { position: relative; height: 100%; border-radius: 31px; overflow: hidden; background: #fff; transform: translateZ(0); }
.dgp__island { position: absolute; z-index: 9; top: 8px; left: 50%; width: 34%; height: 22px; transform: translateX(-50%); border-radius: 12px; background: #000; }
.dgp .dcard-host { height: 100%; overflow: hidden auto; scrollbar-width: none; }
.dgp .dcard-host::-webkit-scrollbar { display: none; }
.dgp .dc__top { padding-top: 36px; }
.dgp__note { margin: 0; font-size: .76rem; color: var(--ink-3, #5F6488); text-align: center; }
@media (max-width: 1099px) {
  .dgp { inset: 0; width: auto; border-radius: 0; padding: max(14px, env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom)); background: rgba(15, 20, 64, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); align-content: center; transform-origin: center; }
  .dgp__head { max-width: 340px; color: #fff; }
  .dgp__x { background: rgba(255, 255, 255, .14); color: #fff; }
  .dgp__phone { width: min(340px, 100%); height: min(700px, calc(100svh - 130px)); }
  .dgp__note { color: rgba(255, 255, 255, .7); }
  html.dgp-lock { overflow: hidden; }
}

/* galéria: náhľad šablóny */
.tcell { position: relative; }
.tgrid .tzoom { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 3px 0 rgba(15, 20, 64, .22); opacity: 0; transform: scale(.85); transition: opacity .2s, transform .25s var(--pop), background-color .2s; }
.tgrid .tzoom svg { width: 20px; height: 20px; }
.tcell:hover .tzoom, .tgrid .tzoom:focus-visible { opacity: 1; transform: none; }
.tgrid .tzoom:hover { background: var(--yellow); }
@media (hover: none) { .tgrid .tzoom { opacity: 1; transform: none; width: 34px; height: 34px; top: 6px; right: 6px; } .tgrid .tzoom svg { width: 17px; height: 17px; } }
.tpv { width: min(760px, calc(100% - 24px)); }
.tpv__tag { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3) !important; margin: 0 3rem 0 0 !important; }
.tpv h2 { margin-top: -.4rem; }
.tpv__stage { display: grid; place-items: center; padding: clamp(1.4rem, 4vw, 2.6rem); border-radius: 20px; background: radial-gradient(120% 100% at 50% 0%, #fffaf1, #e9e1d3); perspective: 1400px; cursor: pointer; }
.tpv__card { position: relative; display: block; width: min(100%, 560px); aspect-ratio: 90 / 50; transform-style: preserve-3d; transition: transform .8s var(--pop); }
.tpv.is-back .tpv__card { transform: rotateY(180deg); }
.tpv__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; backface-visibility: hidden; box-shadow: var(--card-sh); background: #f1ece2; }
.tpv__card img + img { transform: rotateY(180deg); }
.tpv.is-busy .tpv__card img { filter: blur(2px) saturate(.8); transition: filter .2s; }
.tpv__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tpv__sides button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tpv__nav { display: flex; gap: 8px; }
.tpv__nav button { width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 rgba(15, 20, 64, .2); font-size: 1.2rem; font-weight: 800; transition: transform .2s var(--pop), background-color .2s; }
.tpv__nav button:hover { background: var(--yellow); transform: translateY(-2px); }
.tpv__use { width: 100%; justify-content: center; }
@media (max-width: 560px) { .tpv__tag [data-tpv-pos] { display: none; } .tpv__tag { margin-right: 2.6rem !important; } }
/* galéria: kým sa náhľad kreslí, jemne sa leskne */
.tgrid img:not([src]), .tgrid img[src=""] { background: linear-gradient(100deg, #ECEEF8 30%, #F7F8FD 50%, #ECEEF8 70%) 0 0 / 300% 100%; animation: tshimmer 1.4s linear infinite; }
@keyframes tshimmer { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .tgrid img:not([src]) { animation: none; } }

/* =========================================================
   Tvorba 2.0 – plynulejší sprievodca
   ========================================================= */
/* 1: čo AI zo zadania pochopí */
.sense { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: .85rem; }
.sense span { display: inline-flex; align-items: center; gap: 6px; padding: .3rem .65rem .3rem .4rem; border-radius: 99px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .72); font-size: .78rem; font-weight: 700; transition: background-color .25s, color .25s; }
.sense span i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); display: grid; place-items: center; transition: background-color .25s, box-shadow .25s, transform .35s var(--pop); }
.sense span.on { background: rgba(255, 255, 255, .2); color: #fff; }
.sense span.on i { background: var(--yellow); box-shadow: none; transform: scale(1.08); }
.sense span.on i::after { content: ''; width: 7px; height: 4px; margin-top: -2px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.sense small { flex-basis: 100%; font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .78); min-height: 1.2em; }
.sense.is-ready small { color: var(--yellow); }
.way--ai .ask { margin-top: 1.2rem; }
.way--ai .chips { margin-top: .7rem; }

/* 1: obľúbené šablóny */
.insp { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.insp__h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; }
.insp__h h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.03em; }
.insp__row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
.insp__c { display: grid; gap: .55rem; text-align: left; font-weight: 800; font-size: .86rem; }
.insp__c img { width: 100%; height: auto; aspect-ratio: 90 / 50; object-fit: cover; border-radius: 3px; background: #EEF0FA; transform: rotate(var(--r, 0deg)); box-shadow: 0 1px 1px rgba(15, 20, 64, .2), 0 10px 18px -10px rgba(15, 20, 64, .45); transition: transform .45s var(--pop), box-shadow .3s; }
.insp__c:hover img, .insp__c:focus-visible img { transform: rotate(0deg) translateY(-6px) scale(1.04); box-shadow: 0 1px 1px rgba(15, 20, 64, .2), 0 22px 30px -16px rgba(15, 20, 64, .55); }
.insp__c:focus-visible { outline: none; }
.insp__c:focus-visible span { text-decoration: underline; }
.insp__c.is-going img { animation: inspGo .6s var(--pop) both; }
@keyframes inspGo { 50% { transform: scale(.94) rotate(0deg); } }
@media (max-width: 1060px) { .insp__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .insp__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(-1 * (100vw - 100%) / 2); padding: 8px calc((100vw - 100%) / 2) 14px; scrollbar-width: none; }
  .insp__row::-webkit-scrollbar { display: none; }
  .insp__c { flex: 0 0 62%; scroll-snap-align: start; }
}

/* 2: živé načítavanie */
.ai__load { gap: 18px; padding: 2.4rem 0 1rem; }
.ai__lh { display: grid; justify-items: center; gap: 10px; }
.ai__bar { width: min(420px, 80%); height: 6px; border-radius: 99px; background: rgba(15, 20, 64, .08); overflow: hidden; }
.ai__bar i { display: block; height: 100%; width: 8%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--yellow), var(--cobalt)); background-size: 200% 100%; animation: aiBar 2s linear infinite; transition: width 1.2s var(--ease); }
@keyframes aiBar { to { background-position: -200% 0; } }
.ai__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: .84rem; font-weight: 700; color: var(--ink-3); }
.ai__steps li { display: inline-flex; align-items: center; gap: 6px; transition: color .3s; }
.ai__steps li i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(15, 20, 64, .18); display: grid; place-items: center; }
.ai__steps li.now { color: var(--ink); }
.ai__steps li.now i { box-shadow: inset 0 0 0 2px var(--cobalt); animation: aiNow 1s ease-in-out infinite; }
@keyframes aiNow { 50% { transform: scale(1.25); } }
.ai__steps li.ok { color: #1D7A45; }
.ai__steps li.ok i { background: #2EAA62; box-shadow: none; }
.ai__steps li.ok i::after { content: ''; width: 6px; height: 3px; margin-top: -1.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.skel { margin-top: 1rem; }
.skel i { position: relative; overflow: hidden; }
.skel i b { position: absolute; width: 64%; aspect-ratio: 90 / 50; border-radius: 4px; background: linear-gradient(100deg, #F6EFE2 30%, #FFFBF4 50%, #F6EFE2 70%) 0 0 / 300% 100%; animation: skel 1.4s linear infinite; box-shadow: 0 14px 24px -14px rgba(60, 40, 20, .35); }
.skel i b:first-child { left: 22%; top: 14%; transform: rotate(8deg); opacity: .8; }
.skel i b + b { left: 9%; top: 38%; transform: rotate(-5deg); }
.skel i em { position: absolute; right: 14px; top: 14px; padding: .28rem .65rem; border-radius: 99px; background: rgba(15, 20, 64, .1); color: var(--ink-3); font-style: normal; font-size: .72rem; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .skel i b, .ai__bar i, .ai__steps li.now i { animation: none; } }

/* 2: zväčšenie návrhu */
.mock__zoom { position: absolute; left: 14px; bottom: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: .45rem .8rem .45rem .6rem; border-radius: 99px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: .78rem; font-weight: 800; box-shadow: 0 3px 0 rgba(15, 20, 64, .18); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .3s var(--pop), background-color .15s; }
.mock__zoom svg { width: 16px; height: 16px; }
.mock:hover .mock__zoom, .mock__zoom:focus-visible { opacity: 1; transform: none; }
.mock__zoom:hover { background: var(--yellow); }
@media (hover: none) { .mock__zoom { opacity: 1; transform: none; } }
.mock { cursor: pointer; }
.mock__scene { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), 0 18px 34px -24px rgba(40, 28, 15, .55); }

/* 3: plátno – vizitka pláva na ploche */
.ed-canvas { position: relative; overflow: hidden; display: block; }
.ed-canvas .canvas-container { box-shadow: none; border-radius: 0; }
.ed-top { gap: 12px; }
.ed-tools { display: flex; align-items: center; gap: 8px; }
.ed-zoom { display: flex; align-items: center; padding: 3px; border-radius: 14px; background: #fff; box-shadow: var(--sh); }
.ed-zoom .tb { box-shadow: none; }
.tb--s { min-width: 36px; width: 36px; height: 36px; font-size: 1.2rem; font-weight: 800; }
.tb--z { min-width: 62px; height: 36px; font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tb--z.on { color: var(--cobalt); }
.ed-zoom .tb:hover, .ed-hist .tb:hover, .ed-keys .tb:hover { background: #F3F4FB; }
.ed-hist .tb, .ed-keys .tb { transition: background-color .15s, transform .2s var(--pop); }
.ed-hist .tb:active, .ed-zoom .tb:active { transform: scale(.94); }
.ed-keys { position: relative; }
.ed-keys .tb--s { font-size: .95rem; }
.ed-keys__pop { right: 0; min-width: 280px; padding: 12px 14px; gap: 6px; font-size: .82rem; color: var(--ink-2); }
.ed-keys__pop b { font-size: .9rem; color: var(--ink); margin-bottom: 2px; }
.ed-keys__pop p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; }
.ed-keys__pop kbd { padding: .1rem .4rem; border-radius: 6px; background: #F3F4FB; box-shadow: inset 0 -1.5px 0 rgba(15, 20, 64, .15); font: 700 .74rem var(--mono, monospace); color: var(--ink); }
.ed-saved { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; margin-left: 4px; padding: .38rem .75rem .38rem .6rem; border-radius: 99px; font-size: .76rem; font-weight: 700; color: var(--ink-3); transition: background-color .3s, color .3s; }
.ed-saved i { width: 8px; height: 8px; border-radius: 50%; background: #2EAA62; transition: background-color .3s; }
.ed-saved.is-saving i { background: var(--yellow); animation: dgpPulse 1s infinite; }
.ed-saved.is-flash { background: #DDF5E7; color: #1D7A45; }
@media (max-width: 1200px) { .ed-saved span { display: none; } .ed-saved { padding: .5rem; } }
.coach { position: absolute; left: 50%; top: 72px; z-index: 7; transform: translateX(-50%); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; width: min(460px, calc(100% - 32px)); padding: 12px 12px 12px 18px; border-radius: 18px; background: var(--ink); color: #fff; box-shadow: 0 18px 40px -16px rgba(15, 20, 64, .6); animation: coachIn .55s var(--pop) both; }
.coach b { font-size: .92rem; }
.coach span { grid-column: 1; font-size: .8rem; color: rgba(255, 255, 255, .78); line-height: 1.4; }
.coach button { grid-row: 1 / span 2; grid-column: 2; padding: .55rem .9rem; border-radius: 12px; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: .82rem; }
.coach[hidden] { display: none; }
@keyframes coachIn { from { opacity: 0; transform: translate(-50%, 14px); } }
.ed-foot .link { white-space: nowrap; }

/* 3: ukážkové údaje */
.fld.is-sample > span::after { content: 'ukážka'; margin-left: .45rem; padding: .08rem .45rem; border-radius: 99px; background: var(--yellow); color: var(--ink); font-size: .66rem; font-weight: 800; letter-spacing: .02em; }
html[lang="cs"] .fld.is-sample > span::after { content: 'ukázka'; }
.fld.is-sample input { background: #FFF7DC; box-shadow: inset 0 0 0 2px #F2D27A; color: var(--ink-2); }
.fld.is-sample input:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--cobalt); color: var(--ink); }
.pn__tip.is-warn { background: #FFF1D6; color: #7A4A00; }

/* 4: rozpis ceny a dôvera */
.sum__lines { display: grid; gap: 6px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1.5px dashed rgba(255, 255, 255, .28); font-size: .86rem; }
.sum__lines li { display: flex; justify-content: space-between; gap: 1rem; color: rgba(255, 255, 255, .86); }
.sum__lines li b { white-space: nowrap; font-weight: 800; color: #fff; }
.sum__lines li.free b { color: var(--yellow); }
.sum__trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.sum__trust li { display: grid; gap: 2px; padding: 10px 10px 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .1); font-size: .74rem; line-height: 1.3; color: rgba(255, 255, 255, .78); }
.sum__trust b { font-size: .8rem; color: #fff; }
@media (max-width: 420px) { .sum__trust { grid-template-columns: 1fr; } .sum__trust li { grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; } }
.obar { display: none; }
@media (max-width: 760px) {
  .obar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 20px; background: var(--ink); color: #fff; box-shadow: 0 16px 34px -14px rgba(15, 20, 64, .6); transition: transform .35s var(--pop), opacity .25s; }
  .obar[hidden] { display: none; }
  .obar.is-off { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .obar div { display: grid; line-height: 1.15; }
  .obar b { font-size: 1.35rem; letter-spacing: -.04em; }
  .obar small { font-size: .72rem; color: rgba(255, 255, 255, .7); font-weight: 600; }
  .obar .btn { min-height: 48px; }
  .st4 { padding-bottom: 7rem; }
  /* papier: názov a popis pod sebou, cena vpravo */
  .paper { grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 0; padding: 12px 14px; }
  .paper__sw { grid-row: 1 / span 2; grid-column: 1; }
  .paper b { grid-column: 2; grid-row: 1; align-self: end; }
  .paper small { grid-column: 2; grid-row: 2; align-self: start; }
  .paper em { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0; }
  .paper .badge4 { right: 12px; }
  /* nástroje vybraného prvku dole nad tlačidlom, ako v mobilných aplikáciách */
  .ctx { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(80px + env(safe-area-inset-bottom)); transform: none; z-index: 61; max-width: none; border-radius: 18px; }
  .ctx .pop { top: auto; bottom: calc(100% + 10px); }
  .ed-tools { gap: 6px; }
  .ed-keys { display: none; }
  .tb--z { min-width: 52px; }
  .coach { bottom: 12px; }
}
.insp__h .link { white-space: nowrap; }
@media (max-width: 760px) {
  .ed-zoom { display: none; }
  .ed-saved { margin-left: 0; }
  .coach { top: auto; bottom: 10px; padding: 10px 10px 10px 14px; }
  .coach span { display: none; }
  .coach b { font-size: .84rem; }
}
@media (max-width: 760px) {
  .ed-stage.is-zoomed .ed-zoom { display: flex; }
  .ed-stage.is-zoomed .ed-zoom .tb--s { display: none; }
  .ed-stage.is-zoomed .tb--z::after { content: ' ⤢'; }
}
.tb--z { white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1240px) {
  .ed-price { display: none; }
  .ed-foot .btn--lg { padding-inline: 1.2rem; font-size: 1rem; }
}
@media (min-width: 761px) and (max-width: 1060px) { .ed-save { display: none; } }
@media (min-width: 761px) and (max-width: 1060px) {
  .ed-keys, .ed-saved { display: none; }
  .ed-top .seg button { padding: .5rem .75rem; }
  .tb--z { min-width: 52px; }
  .ed-top { gap: 8px; padding-inline: 12px; }
}
@media (max-width: 560px) {
  .resume { flex-wrap: wrap; }
  .resume > div { flex: 1 1 calc(100% - 130px); }
  .resume .btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* jemná ponuka „uložiť na neskôr“ po dlhšej chvíli v editore (len raz za návštevu) */
.nudge { position: absolute; left: 18px; bottom: calc(100% + 10px); z-index: 7; display: flex; align-items: center; gap: .8rem; max-width: min(560px, calc(100% - 36px)); padding: .7rem .8rem .7rem 1rem; border-radius: 16px; background: var(--ink); color: #fff; font-size: .88rem; font-weight: 600; line-height: 1.35; box-shadow: 0 18px 30px -16px rgba(15, 20, 64, .55); animation: nudgeIn .45s var(--pop) both; }
.nudge[hidden] { display: none; }
.nudge .btn { flex: none; }
.nudge__x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.1rem; cursor: pointer; }
.nudge__x:hover { background: rgba(255, 255, 255, .22); }
@keyframes nudgeIn { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 760px) { .nudge { left: 12px; right: 12px; max-width: none; font-size: .82rem; } }
@media (prefers-reduced-motion: reduce) { .nudge { animation: none; } }