/* Симулятор стартапу · етапи й вправи. Стиль «Дошка-мапа»: контур, тінь знизу, стікери. Підключається після app.css. */

/* ── спільні дрібниці ── */
.x-bar { display: block; height: 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--board); overflow: hidden; }
.x-bar > i { display: block; height: 100%; background: var(--ok); border-radius: 0 6px 6px 0; transition: width .3s ease; }
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars i { width: 13px; height: 13px; background: #d3dad8; clip-path: polygon(50% 0, 62% 35%, 98% 35%, 69% 57%, 80% 91%, 50% 70%, 20% 91%, 31% 57%, 2% 35%, 38% 35%); }
.stars i.on { background: #f5a300; }
.chip.ok { background: #d9f3e3; color: #14663a; }

/* ── ліворуч: маршрут етапів ── */
.road:empty { display: none; }
.home.v2 { grid-template-columns: 244px minmax(0, 1fr); gap: 22px; }
.home.v2 .rail-col { position: static; }
.rail { background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 10px; }
.rail h2 { font: 700 13px Rubik, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #586375; padding: 6px 10px 8px; }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li { position: relative; }
.rail li:not(:last-child)::after { content: ''; position: absolute; left: 25px; top: calc(100% - 3px); height: 6px; width: 2px; background: #cfd6e0; }
.rs { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 12px; border: 2px solid transparent; }
.rs .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 700 15px Rubik, sans-serif; border: 2px solid var(--ink); background: #fff; }
.rs .rt b { display: block; font: 600 14.5px/1.2 Rubik, sans-serif; }
.rs .rt small { display: block; color: #586375; font-size: 12.5px; }
.rs.done .n { background: var(--ok); color: #fff; border-color: var(--ok); }
.rs.cur .n { background: var(--acc); color: #fff; }
.rs.open .n { background: var(--sky); }
.rs.cur { background: var(--yel); }
.rs.sel:not(.cur) { background: #eef2f1; border-color: var(--ink); }
.rs.lock { color: #5f6b7e; cursor: default; }
.rs.lock .n { border: 2px dashed #a7b1c0; color: #66717f; background: transparent; }
.rs.lock .rt small { color: #66717f; }
.rs:not(:disabled):hover { background: #f1f4f3; }
.rs.cur:hover { background: var(--yel); }
.rail-foot { margin: 10px 4px 4px; padding: 10px 10px 8px; border-top: 2px dashed var(--line); display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; font-size: 13px; color: #586375; }
.rail-foot b { color: var(--ink); font-family: Rubik, sans-serif; }
.rail-foot .x-bar { grid-column: 1 / -1; height: 8px; }

/* ── праворуч: аркуш етапу ── */
.ws { background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 26px 28px 24px; margin-bottom: 26px; }
.ws .k { font: 700 23px Caveat, cursive; color: #586375; }
.ws h1 { font: 700 31px/1.12 Rubik, sans-serif; margin: 2px 0 8px; }
.ws .lead { max-width: 62ch; color: #3a4457; }
.topics { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; }
.topics li { font-size: 13px; font-weight: 600; padding: 3px 11px; border-radius: 999px; background: var(--sky); border: 2px solid var(--ink); }
.ws-prog { margin: 18px 0 4px; display: grid; gap: 6px; }
.ws-prog small { color: #586375; }
.steps { list-style: none; margin: 8px 0 0; padding: 0; }
.ws .step { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 15px 2px; border-top: 2px dashed #d6dedb; }
.ws .sn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 700 17px Rubik, sans-serif; border: 2px solid var(--ink); background: var(--board); }
.ws .step.now .sn { background: var(--yel); }
.ws .step.ok .sn { background: var(--ok); color: #fff; border-color: var(--ok); }
.ws .step b { font: 600 16.5px/1.25 Rubik, sans-serif; display: block; }
.ws .step small { display: block; color: #586375; margin-top: 2px; }
.ws .step.ok b { color: #586375; }
.ws .step .sx { display: block; margin-top: 4px; }
.ws-opt { margin-top: 14px; border: 2px dashed #b9c3cf; border-radius: 14px; padding: 4px 14px; background: #fafbfa; }
.ws-opt summary { cursor: pointer; font: 600 14.5px Rubik, sans-serif; padding: 9px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.ws-opt summary::-webkit-details-marker { display: none; }
.ws-opt[open] summary { border-bottom: 2px dashed #d6dedb; }
.ws-next { margin-top: 18px; display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--board); color: #44506a; }
.ws-next b { color: var(--ink); font-family: Rubik, sans-serif; display: block; }
.ws-next small { display: block; }
.ws-next .btn { margin-left: auto; white-space: nowrap; }
.ws-next.ok { background: #d9f3e3; color: #14663a; }

/* ── тонка смужка етапу на інших сторінках ── */
.stbar { display: flex; align-items: center; gap: 12px; width: min(1240px, calc(100% - 24px)); margin: 14px auto 0; padding: 8px 14px 8px 8px; background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); text-align: left; }
.stbar .n { width: 34px; height: 34px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; font: 700 16px Rubik, sans-serif; flex: none; }
.stbar small { display: block; color: #586375; font-size: 12px; line-height: 1.2; }
.stbar b { font: 600 15px/1.2 Rubik, sans-serif; }
.stbar .x-bar { flex: 1; max-width: 240px; margin-left: auto; }
.stbar .sc { font: 600 13px Rubik, sans-serif; color: #44506a; white-space: nowrap; }
.stbar:hover { background: #f7faf9; }

/* ── сторінка вправи ── */
.ex { max-width: 1040px; display: flex; flex-direction: column; gap: 18px; padding-bottom: 90px; }
.ex-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font: 600 14px Rubik, sans-serif; color: #44506a; padding: 8px 12px 8px 6px; min-height: 36px; border-radius: 10px; }
.ex-back:hover { background: #fff; }
.ex-intro { display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px; background: var(--yel); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 var(--ink); }
.ex-intro p { font-size: 15.5px; line-height: 1.5; }
.ex-intro small { display: block; margin-top: 6px; color: #6b5200; font-weight: 600; }
.ex-ic { width: 46px; height: 46px; border-radius: 13px; background: #fff; border: 2px solid var(--ink); display: grid; place-items: center; flex: none; }
.ex-body { display: flex; flex-direction: column; gap: 18px; }
.ex-live:empty { display: none; }
.ex-foot { position: sticky; bottom: 0; z-index: 12; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; padding: 12px 16px; background: rgba(255,255,255,.96); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 var(--ink); }
.ex-btns { margin-left: auto; display: flex; gap: 8px; }

.xbox { background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 var(--ink); padding: 16px 18px 18px; }
.xbox > header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.xbox > header h3 { font: 700 18px Rubik, sans-serif; }
.xbox > header .xs { margin-left: auto; color: #586375; font-size: 13px; font-weight: 600; }
.xbox p.sub { color: #586375; margin: -4px 0 12px; }
.xbox.soft { background: #f7faf9; box-shadow: none; }
.xbox.ok { background: #effaf3; }
.xg { display: grid; gap: 14px; }
.xg.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xg.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xg.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xg.side { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.xrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.xrow.end { justify-content: flex-end; }
.xp { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 7px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: 600 14px/1.25 'Golos Text', sans-serif; transition: transform .1s; }
.xp small { font-weight: 500; color: #586375; font-size: 12px; }
.xp:hover { background: #f1f4f3; }
.xp.on { background: var(--yel); box-shadow: 0 2px 0 var(--ink); }
.xp.on small { color: #6b5200; }
.xp.card { border-radius: 14px; padding: 10px 14px; }
.xf { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.xf-l { font: 600 13px Rubik, sans-serif; color: #3a4457; }
.xf small { color: #586375; font-size: 12.5px; }
.xf .inp, .xf textarea.inp { width: 100%; }
.xf textarea.inp { resize: vertical; min-height: 64px; }
.xn { position: relative; display: block; }
.xn i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: #586375; pointer-events: none; }
.xn .inp { padding-right: 34px; }
.xcol input[type="color"] { width: 54px; height: 38px; padding: 2px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; cursor: pointer; }
.xsl { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(120px, 2fr) 70px; gap: 10px; align-items: center; padding: 4px 0; }
.xsl label { font-weight: 600; font-size: 14px; }
.xsl output { font: 700 14px Rubik, sans-serif; text-align: right; }
.x-tip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; background: var(--sky); font-size: 14px; border: 2px solid var(--ink); }
.x-tip .ic { margin-top: 2px; }
.x-tip.ok { background: #d9f3e3; }
.x-tip.bad { background: #ffe1e1; }
.x-tip.warn { background: var(--yel); }
.x-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.x-checks li { display: flex; gap: 8px; align-items: flex-start; color: #586375; font-size: 14px; }
.x-checks li.ok { color: #14663a; font-weight: 600; }
.x-checks li small { display: block; font-weight: 400; color: #586375; }
.x-checks .ic { margin-top: 3px; }
.xlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.xitem { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; }
.xitem > span, .xitem > div { flex: 1; min-width: 0; }
.xitem .ib { flex: none; }
.xadd { display: flex; gap: 8px; }
.xadd .inp { flex: 1; min-width: 0; }
.xtag { display: inline-block; font: 600 12px Rubik, sans-serif; padding: 1px 8px; border-radius: 999px; background: var(--board); border: 1.5px solid #b9c3cf; color: #44506a; white-space: nowrap; }
.xtag.ok { background: #d9f3e3; border-color: #7bc79a; color: #14663a; }
.xtag.warn { background: var(--yel); border-color: #d9b400; color: #6b5200; }
.xtag.bad { background: #ffe1e1; border-color: #e08a8a; color: #9b1c1c; }
.xtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.xtable th { text-align: left; font: 600 12.5px Rubik, sans-serif; color: #586375; padding: 6px 8px; border-bottom: 2px solid var(--ink); }
.xtable td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.xtable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xscroll { overflow-x: auto; }

/* ── перетягування ── */
[data-drag] { touch-action: none; cursor: grab; user-select: none; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
[data-drag].dragging { cursor: grabbing; z-index: 20; box-shadow: 0 10px 20px -8px rgba(0,0,0,.4); }
[data-drop].over { outline: 3px dashed var(--acc); outline-offset: -3px; }

/* ── адаптація ── */
@media (max-width: 1180px) { .xg.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .home.v2 { display: flex; flex-direction: column; gap: 16px; }
  .home.v2 > .col, .home.v2 > .rail-col { display: contents; }
  .home.v2 .rail { order: 1; padding: 8px; }
  .home.v2 .rail h2, .home.v2 .rail-foot { display: none; }
  .home.v2 .ws { order: 2; margin-bottom: 0; } .home.v2 .goalcard { order: 3; margin-bottom: 0; } .home.v2 .mentor { order: 4; margin-bottom: 0; } .home.v2 .status { order: 5; margin-bottom: 0; }
  .home.v2 .col > *:not(.rail):not(.ws):not(.goalcard):not(.mentor):not(.status) { order: 6; }
  .rail ol { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
  .rail ol::-webkit-scrollbar { display: none; }
  .rail li { flex: none; } .rail li::after { display: none; }
  .rs { padding: 6px 12px 6px 6px; gap: 8px; border: 2px solid var(--line); border-radius: 999px; width: auto; }
  .rs .rt small { display: none; } .rs .rt b { font-size: 13.5px; white-space: nowrap; }
  .rs .n { width: 28px; height: 28px; font-size: 13px; }
  .rs.sel:not(.cur) { border-color: var(--ink); }
}
@media (max-width: 760px) {
  .xg.c2, .xg.c3, .xg.c4, .xg.side { grid-template-columns: minmax(0, 1fr); }
  .ws { padding: 18px 16px; } .ws h1 { font-size: 25px; }
  .ws .step { grid-template-columns: 38px minmax(0, 1fr); } .ws .step > .btn, .ws .step > .chip { grid-column: 2; justify-self: start; }
  .xsl { grid-template-columns: minmax(0, 1fr) 60px; } .xsl input { grid-column: 1 / -1; grid-row: 2; }
  .ex-foot { padding: 8px 10px; gap: 8px; } .ex-btns { width: 100%; } .ex-btns .btn { flex: 1; white-space: nowrap; } .ex-btns .btn.ghost { display: none; }
  .stbar .x-bar { display: none; } .stbar .sc { margin-left: auto; }
  .ex-intro { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .x-bar > i { transition: none; } }
@media print { .ex-foot, .ex-back, .stbar { display: none; } }

/* ── вправи етапу 1 ── */
.xh { display: block; font-weight: 400; color: #586375; font-size: 12px; }
.mt { margin-top: 14px; }
.xc { display: flex; flex-direction: column; align-items: center; text-align: center; }
.xc .big-n { font: 700 34px Rubik, sans-serif; margin-top: -6px; }
.xc small { color: #586375; }
.radar { max-width: 100%; height: auto; }
.nrow { padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; background: #fff; display: grid; gap: 6px; }
.nrow.best { border-color: var(--ok); background: #f4fbf7; }
.nh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nh .ns { margin-left: auto; font: 700 16px Rubik, sans-serif; }
.nd { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12.5px; color: #586375; }
.nd b { color: var(--ink); }
.nadj { margin-top: 4px; }
.nadj summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #44506a; display: flex; align-items: center; gap: 6px; list-style: none; }
.nadj summary::-webkit-details-marker { display: none; }
.nadj[open] summary { margin-bottom: 6px; }
.pmapw { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 8px; }
.pmapw .ay { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font: 600 13px Rubik, sans-serif; color: #44506a; }
.pmap { position: relative; aspect-ratio: 16 / 9; min-height: 280px; border: 2px solid var(--ink); border-radius: 14px; background: repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), #e4eae8 calc(25% - 1px) 25%), repeating-linear-gradient(90deg, transparent 0 calc(16.66% - 1px), #e4eae8 calc(16.66% - 1px) 16.66%), #fbfcfb; overflow: hidden; }
.pmap .pt, .pmap .pb { position: absolute; left: 10px; font: 600 12px Rubik, sans-serif; color: #5f6b7e; } .pmap .pt { top: 8px; } .pmap .pb { bottom: 8px; }
.axx { grid-column: 2; display: flex; justify-content: space-between; font: 600 13px Rubik, sans-serif; color: #44506a; } .axx small { font-weight: 500; color: #7b8698; }
.pdot { position: absolute; transform: translate(calc(var(--ax, -50%) + var(--dx, 0px)), calc(-50% + var(--dy, 0px))); display: flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); font: 600 12.5px Rubik, sans-serif; white-space: nowrap; max-width: 170px; box-shadow: 0 2px 0 var(--ink); }
.pdot span { overflow: hidden; text-overflow: ellipsis; }
.pdot i { width: 14px; height: 14px; border-radius: 50%; background: #a7b1c0; border: 2px solid var(--ink); flex: none; }
.pdot.me { background: var(--yel); } .pdot.me i { background: var(--acc); }
.pdot.fresh { animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(99,102,241,.25), 0 2px 0 var(--ink); } }
.pdot.dragging { transform: translate(calc(var(--ax, -50%) + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.06); }
.pdot.al { --ax: -11px; } .pdot.ar { --ax: calc(-100% + 11px); flex-direction: row-reverse; padding: 2px 4px 2px 10px; }
@media (max-width: 560px) { .pdot { max-width: 118px; font-size: 12px; } }
.pgap { position: absolute; width: 16.66%; height: 25%; border: 2.5px dashed var(--ok); border-radius: 12px; background: rgba(21,112,60,.08); display: grid; place-items: end center; pointer-events: none; }
.pgap small { font: 700 12px Rubik, sans-serif; color: var(--ok); padding-bottom: 3px; }
.xtable td .xf { gap: 0; } .xtable td .inp { min-width: 110px; }
.quads { gap: 16px; }
.quad { border: 2px solid var(--line); border-radius: 14px; padding: 12px; background: #fcfdfc; display: flex; flex-direction: column; gap: 8px; }
.quad h4 { font: 700 16px Rubik, sans-serif; } .quad > small { color: #586375; margin-top: -6px; }
.quad.says { background: #fff8e0; } .quad.thinks { background: #eef3ff; } .quad.does { background: #effaf3; } .quad.feels { background: #fff0f4; }
.sg { gap: 6px; }
.xchip { font-size: 13px; min-height: 32px; padding: 5px 12px; border-radius: 999px; border: 1.5px dashed #8a95a8; background: rgba(255,255,255,.7); color: #44506a; }
.xchip:hover { background: #fff; border-style: solid; }
.seginfo { border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; display: grid; gap: 3px; font-size: 13.5px; background: #fff; }
.seginfo.on { border-color: var(--ink); background: var(--yel); }
.jt { margin-top: 10px; font: 600 17px/1.4 Rubik, sans-serif; color: #2b3447; }
.jt:empty { display: none; }
.feat { border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; background: #fff; }
.feat.must { border-color: var(--ok); background: #f4fbf7; } .feat.should { border-color: #d9b400; background: #fffbea; } .feat.wont { opacity: .65; }
.feat .fh { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .feat p { color: #586375; font-size: 13.5px; }
.mvpbar { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; } .mvpbar .x-bar { flex: 1; }

/* ── вправи етапу 2 ── */
.personas { align-items: start; }
.persona { border: 2px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 10px; background: hsl(var(--h) 80% 98%); }
.persona.main { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); background: hsl(var(--h) 85% 95%); }
.persona header { display: flex; align-items: center; gap: 8px; }
.pav { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--h) 70% 85%); color: hsl(var(--h) 60% 25%); font: 700 14px Rubik, sans-serif; flex: none; border: 2px solid var(--ink); }
.pn { flex: 1; } .pn .inp { font-weight: 700; }
.w5q { display: grid; gap: 6px; } .w5h b { font: 700 14px Rubik, sans-serif; margin-right: 6px; } .w5h small { color: #586375; }
.w5q .xp { padding: 6px 12px; min-height: 32px; font-size: 13px; }
.w5s { gap: 2px 10px; }
.cmp { display: grid; grid-template-columns: 150px minmax(0, 1fr) 46px; gap: 10px; align-items: center; margin: 4px 0; font-size: 14px; } .cmp b { text-align: right; }
.chcard { border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; display: grid; gap: 4px; background: #fff; } .chcard.on { border-color: var(--ink); background: #fffbea; }
.chcard small { color: #586375; } .chcard p { font-size: 13px; color: #586375; }
.chw { flex-direction: column; align-items: stretch; gap: 2px; }
.sheet { border: 2px solid var(--ink); border-radius: 6px; background: #fffef8; padding: 18px 22px; box-shadow: 6px 6px 0 var(--ink); transform: rotate(-.4deg); }
.sheet h4 { font: 700 18px Rubik, sans-serif; margin-bottom: 10px; }
.sheet dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; } .sheet dt { font: 600 13px Rubik, sans-serif; color: #586375; } .sheet dd { margin: 0; }
.goalline { margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: var(--yel); font: 600 16px Rubik, sans-serif; }
.warnt { color: #9b1c1c; font-weight: 600; }
.syms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sw2 { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--ink); } .pswatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lgm { display: inline-grid; place-items: center; flex: none; }
.logoed > div { display: grid; gap: 18px; align-content: start; }
.stage { display: grid; place-items: center; min-height: 190px; border-radius: 14px; background: repeating-conic-gradient(#f4f6f5 0 25%, #fff 0 50%) 0 0 / 22px 22px; border: 2px dashed #b9c3cf; padding: 20px; }
.lockup { display: flex; align-items: center; gap: 14px; color: var(--ink); } .lockup.stack { flex-direction: column; text-align: center; gap: 8px; }
.lockup .lw { font-size: 30px; line-height: 1.05; letter-spacing: -.01em; } .lockup .lw small { display: block; font: 500 12px 'Golos Text', sans-serif; color: #586375; letter-spacing: 0; margin-top: 2px; }
.lockup.mark .lw, .lockup.word .lgm { display: none; }
.mock { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .mock small { display: block; font: 600 12px Rubik, sans-serif; color: #586375; margin-bottom: 6px; }
.m-app, .m-tee { display: flex; flex-direction: column; align-items: flex-start; }
.card2 { background: #fff; border: 2px solid var(--ink); border-left: 10px solid var(--c); border-radius: 8px; padding: 12px; box-shadow: 0 3px 0 var(--ink); } .card2 .lockup .lw { font-size: 17px; } .card2 p { font-size: 12px; margin-top: 8px; } .card2 p span { color: #586375; }
.browser { border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: #fff; } .browser i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d3dad8; margin: 7px 0 0 6px; } .bar2 { padding: 10px 12px; border-top: 2px solid var(--line); } .bar2 .lw { font-size: 16px; }
.tee { width: 150px; height: 130px; position: relative; background: var(--c); clip-path: polygon(22% 0, 38% 0, 50% 12%, 62% 0, 78% 0, 100% 24%, 86% 40%, 78% 32%, 78% 100%, 22% 100%, 22% 32%, 14% 40%, 0 24%); display: grid; place-items: center; } .tee .tp { margin-top: 12px; }
.ax5 { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 600; } .ax5 .xsl { display: block; padding: 0; } .ax5 .xsl label, .ax5 .xsl output { display: none; } .ax5 span:last-child { text-align: right; }
.brandcard { margin-top: 12px; padding: 18px 20px; border-radius: 14px; border: 2px solid var(--ink); background: color-mix(in srgb, var(--c) 12%, #fff); display: grid; gap: 4px; } .brandcard b { font-size: 24px; color: color-mix(in srgb, var(--c) 68%, #000); } .brandcard i { font-style: normal; font-size: 13px; color: #586375; }
.goalcard { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; padding: 14px 18px; background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 var(--ink); }
.goalcard.done { background: #effaf3; } .goalcard.late { background: #fff4f1; } .goalcard .gb { flex: 1; min-width: 0; } .goalcard small { display: block; color: #586375; } .goalcard b { font: 600 15px Rubik, sans-serif; } .goalcard .x-bar { margin-top: 6px; }
@media (max-width: 760px) { .cmp { grid-template-columns: 90px minmax(0, 1fr) 40px; } .mock { grid-template-columns: 1fr; } .ax5 { grid-template-columns: 70px minmax(0, 1fr) 70px; font-size: 12.5px; } .sheet dl { grid-template-columns: 1fr; } }
.w5s .xsl { grid-template-columns: minmax(0, 1fr) auto; } .w5s .xsl input { grid-column: 1 / -1; grid-row: 2; }

/* ── вправи етапу 3 ── */
.swot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sq { border: 2px solid var(--ink); border-radius: 14px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.sq h4 { font: 700 16px Rubik, sans-serif; } .sq h4 small { display: block; font: 500 12px 'Golos Text', sans-serif; color: #586375; }
.sq.S { background: #effaf3; } .sq.W { background: #fff4f1; } .sq.O { background: #eef6ff; } .sq.T { background: #fffbe8; }
.xitem.pend { background: #fffef8; } .xitem.okk { border-color: #7bc79a; } .xitem.badd { border-color: #e08a8a; background: #fff8f8; } .hintq { display: block; color: #9b1c1c; font-size: 12.5px; }
.xitem .btn.sm { min-width: 34px; font-weight: 700; padding: 3px 8px; }
.uspq { margin: 0; padding: 14px 18px; border-left: 6px solid var(--acc); background: #fff; border-radius: 0 12px 12px 0; font: 600 17px/1.5 Rubik, sans-serif; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.uscore { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } .uscore b { font: 700 38px Rubik, sans-serif; } .uscore span { color: #586375; }
.reacts { display: grid; gap: 8px; margin-top: 12px; } .react { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; } .react.a { background: #eef6ff; } .react.b { background: #fff4f1; } .react p { color: #44506a; font-size: 14px; }
.pav.sm { width: 30px; height: 30px; font-size: 12px; }
.namegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nm { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; font: 600 15px Rubik, sans-serif; text-align: left; } .nm:hover { background: #f1f4f3; } .nm.on { background: var(--yel); }
.nmcard { border: 2px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 8px; background: #fff; } .nmcard.fin { border-color: var(--ok); background: #f4fbf7; } .nmcard header { display: flex; gap: 8px; align-items: center; } .nmcard header b { font: 700 18px Rubik, sans-serif; } .nmcard header .ib { margin-left: auto; }
.news { border: 2px solid var(--ink); border-radius: 6px; background: #fffef8; padding: 16px 18px; display: grid; gap: 8px; box-shadow: 5px 5px 0 var(--ink); } .news small { font: 700 12px Rubik, sans-serif; letter-spacing: .08em; color: #586375; } .news h4 { font: 700 19px/1.25 Rubik, sans-serif; } .news p { font-size: 14px; } .news blockquote { margin: 0; padding-left: 12px; border-left: 4px solid var(--yel); font-style: italic; } .news footer { font-size: 12px; color: #586375; border-top: 1px solid var(--line); padding-top: 8px; }
.rev p { margin-bottom: 10px; font-size: 15px; } .rev .xg { gap: 8px; }
@media (max-width: 760px) { .swot { grid-template-columns: minmax(0, 1fr); } }
.quiz { display: grid; gap: 8px; padding: 12px 0; border-top: 2px dashed #d6dedb; } .quiz:first-child { border-top: 0; padding-top: 0; }
.quiz .xp.right { background: #d9f3e3; border-color: var(--ok); } .quiz .xp.wrong { background: #ffe1e1; border-color: #c0392b; }

/* ── вправи етапів 4–5 ── */
.kpis3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .kpis3 > div { border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fcfdfc; } .kpis3 small { display: block; color: #586375; font-size: 12.5px; } .kpis3 b { font: 700 18px Rubik, sans-serif; }
.xnw { max-width: 150px; } .xnw .xf { gap: 0; }
.h4s { font: 700 15px Rubik, sans-serif; margin-bottom: 4px; }
.pmeth { border: 2px solid var(--line); border-radius: 14px; padding: 14px; background: #fff; display: grid; gap: 8px; align-content: start; } .pmeth h4 { font: 700 15px Rubik, sans-serif; } .pbig { font: 700 28px Rubik, sans-serif; } .pmeth small { color: #586375; }
.pline { position: relative; height: 54px; margin: 6px 0 12px; border-bottom: 3px solid var(--ink); } .pline i { position: absolute; top: 18px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #a7b1c0; border: 2px solid var(--ink); } .pline i b { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font: 600 12px Rubik, sans-serif; white-space: nowrap; } .pline em { position: absolute; top: 12px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--yel); border: 2px solid var(--ink); font-size: 0; } .pline em::after { content: ''; } .pline em { transform: translateY(0); }
.asr { align-items: flex-start; } .asr > .xg { flex: 1; }
.dots5 { letter-spacing: 2px; font-size: 12px; color: var(--ink); } .dots5 i { font-style: normal; color: #b4bdbb; }
.srcard { border: 2px solid var(--line); border-radius: 14px; padding: 14px; background: #fff; display: grid; gap: 8px; align-content: start; border-top: 6px solid var(--c); } .srcard.on { border-color: var(--ink); border-top-color: var(--c); box-shadow: 0 3px 0 var(--ink); }
.srcard header { display: flex; gap: 8px; align-items: center; } .srcard header b { font: 700 16px Rubik, sans-serif; } .srcard p { font-size: 13.5px; color: #44506a; } .srcard .rt { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 12.5px; color: #586375; }
.srcsum { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .srcl { display: grid; gap: 4px; font-size: 14px; } .srcl i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; border: 1.5px solid var(--ink); }
.jury { margin-top: 12px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 14px; } .jury.win { background: #d9f3e3; } .jury.fin { background: var(--yel); } .jury.no { background: #ffe9e4; } .jury h4 { font: 700 17px Rubik, sans-serif; margin-bottom: 4px; }
@media (max-width: 760px) { .kpis3 { grid-template-columns: minmax(0, 1fr); } }

/* ── вправи етапу 6 ── */
.cal { border-collapse: separate; border-spacing: 4px; font-size: 13.5px; } .cal th { text-align: left; font: 600 12.5px Rubik, sans-serif; padding: 4px 6px; } .cal th[scope="row"] { min-width: 200px; font-weight: 600; font-size: 13.5px; }
.cel { width: 44px; height: 34px; border: 2px solid var(--line); border-radius: 8px; background: #fff; display: grid; place-items: center; color: #fff; } .cel.on { background: var(--ok); border-color: var(--ink); } .cel:hover { border-color: var(--ink); }
.fun { display: grid; gap: 8px; } .fst { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 10px; align-items: center; font-size: 14px; } .fst small { color: #586375; font-size: 12px; } .fb { position: relative; height: 30px; border: 2px solid var(--ink); border-radius: 8px; background: var(--board); overflow: hidden; } .fb i { position: absolute; inset: 0 auto 0 0; background: var(--acc); opacity: .85; } .fb b { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font: 700 13px Rubik, sans-serif; color: var(--ink); background: #fff; padding: 1px 8px; border-radius: 6px; mix-blend-mode: normal; } .fst.weak .fb { border-color: #c0392b; } .fst.weak .fb i { background: #e0503f; } .fst.weak > span { color: #c0392b; font-weight: 700; }
.promo.pk { border-color: var(--ok); } .xcol1 { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .xcol1 .xp { padding: 6px 12px; min-height: 32px; font-size: 13px; }
.adk { align-items: start; } .adk > div { display: grid; gap: 18px; align-content: start; }
.posterw { container-type: inline-size; display: grid; place-items: center; } .poster { --pad: 7cqw; width: min(100%, 440px); aspect-ratio: var(--ar); max-height: 560px; background: var(--bg); color: var(--tx); position: relative; overflow: hidden; border-radius: 16px; border: 2px solid var(--ink); display: flex; flex-direction: column; justify-content: center; padding: 8cqw; box-shadow: 0 4px 0 var(--ink); }
.poster .pbody { position: relative; z-index: 2; display: grid; gap: 2.2cqw; max-width: 82%; } .poster h3 { font-size: clamp(18px, 8.2cqw, 40px); line-height: 1.08; letter-spacing: -.01em; } .poster p { font-size: clamp(12px, 3.8cqw, 18px); opacity: .92; line-height: 1.3; } .poster .pc { justify-self: start; margin-top: 1.4cqw; background: var(--ac); color: #1d2433; font: 700 clamp(12px, 3.6cqw, 17px) Rubik, sans-serif; padding: 1.6cqw 4cqw; border-radius: 999px; border: 2px solid #1d2433; }
.poster .pl { position: absolute; top: 4cqw; left: 5cqw; display: flex; align-items: center; gap: 6px; font: 600 clamp(11px, 3cqw, 14px) Rubik, sans-serif; z-index: 3; } .poster .pb { position: absolute; top: 5cqw; right: 5cqw; z-index: 3; background: var(--ac); color: #1d2433; font: 800 clamp(14px, 5.5cqw, 26px) Rubik, sans-serif; padding: 1.2cqw 3.2cqw; border-radius: 12px; transform: rotate(6deg); border: 2px solid #1d2433; }
.poster .psy { position: absolute; right: 5cqw; bottom: 4cqw; opacity: .22; z-index: 1; transform: scale(1.8); transform-origin: bottom right; }
.poster .d1, .poster .d2 { position: absolute; z-index: 0; opacity: .18; background: var(--ac); } .deco-circ .d1 { width: 60cqw; height: 60cqw; border-radius: 50%; right: -18cqw; top: -18cqw; } .deco-circ .d2 { width: 36cqw; height: 36cqw; border-radius: 50%; left: -10cqw; bottom: -12cqw; }
.deco-stripe .d1 { inset: 0; background: repeating-linear-gradient(135deg, var(--ac) 0 8cqw, transparent 8cqw 18cqw); } .deco-stripe .d2 { display: none; }
.deco-dots .d1 { inset: 0; background: radial-gradient(var(--ac) 18%, transparent 20%) 0 0 / 7cqw 7cqw; } .deco-dots .d2 { display: none; }
.poster.lay-split { padding: 8cqw; } .poster.lay-quote .pbody { max-width: 88%; } .poster .qm { font: 700 20cqw/0.5 Georgia, serif; opacity: .35; }
@media (max-width: 760px) { .fst { grid-template-columns: 110px minmax(0, 1fr); } .fst small { grid-column: 2; } .cal th[scope="row"] { min-width: 120px; } }

/* ── вправи етапу 7 ── */
.stl { padding: 8px 10px; border: 2px solid var(--line); border-radius: 12px; background: #fff; } .stl.top { border-color: var(--ink); background: var(--yel); } .stl p { font-size: 13.5px; } .stl small { color: #586375; display: block; }
.rl { align-items: flex-start; flex-wrap: wrap; } .rl > span { flex: 0 0 100%; font-weight: 600; } .rl .xp { padding: 6px 12px; min-height: 32px; font-size: 13px; }
.sty { flex-wrap: wrap; } .sty.on { border-color: var(--ok); background: #f4fbf7; } .sty small { display: block; color: #586375; }
.kboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; } .kcol { border: 2px solid var(--line); border-radius: 12px; padding: 8px; background: #f7faf9; display: grid; gap: 8px; align-content: start; min-height: 150px; } .kcol.full { border-color: #d9b400; background: #fffbea; } .kcol h4 { font: 700 14px Rubik, sans-serif; display: flex; justify-content: space-between; } .kcol h4 small { color: #586375; font-weight: 600; }
.kcard { border: 2px solid var(--ink); border-radius: 10px; padding: 8px 10px; background: #fff; display: grid; gap: 4px; } .kcard b { font: 600 13.5px/1.25 Rubik, sans-serif; } .kcard small { color: #586375; } .kcard .xrow { justify-content: flex-end; gap: 4px; } .kcard .ib { width: 30px; height: 28px; padding: 0; }
@media (max-width: 760px) { .kboard { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xitem > .xtag { flex: none; } .xitem > .xp { flex: none; }
.ex-body.cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; } .ex-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .ex-body.cols > .ex-live { position: sticky; top: 76px; display: grid; gap: 18px; } .ex-body.cols > .ex-live:empty { display: none; }
@media (max-width: 960px) { .ex-body.cols { grid-template-columns: minmax(0, 1fr); } .ex-body.cols > .ex-live { position: static; } }
/* резюме */
.cvw { display: grid; gap: 14px; } .cv { background: #fff; color: #1d2433; border: 2px solid var(--ink); border-radius: 6px; padding: 22px 24px; box-shadow: 5px 5px 0 var(--ink); display: grid; gap: 12px; font-size: 14px; } .cv header { display: flex; gap: 14px; align-items: center; } .cv h2 { font: 700 24px Rubik, sans-serif; } .cv header p { color: var(--ac); font-weight: 600; } .cvp { width: 56px; height: 56px; border-radius: 50%; background: var(--ac); color: #fff; display: grid; place-items: center; font: 700 20px Rubik, sans-serif; } .cv h4 { font: 700 12px Rubik, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ac); border-bottom: 2px solid var(--ac); padding-bottom: 2px; margin-bottom: 6px; } .cv ul { padding-left: 18px; } .cvs { display: flex; flex-wrap: wrap; gap: 6px; } .cvs span { border: 1.5px solid var(--ac); border-radius: 999px; padding: 1px 10px; font-size: 13px; } .cvs i { font-style: normal; color: var(--ac); margin-left: 6px; font-size: 9px; letter-spacing: 1px; } .cv footer { color: #586375; font-size: 13px; border-top: 1px solid var(--line); padding-top: 8px; }
.cv.tpl-modern { border-top: 12px solid var(--ac); } .cv.tpl-modern header { background: color-mix(in srgb, var(--ac) 10%, #fff); margin: -22px -24px 0; padding: 18px 24px; border-bottom: 2px solid var(--ac); } .cv.tpl-mini { border-radius: 0; box-shadow: none; font-family: Georgia, serif; } .cv.tpl-mini h4 { color: #1d2433; border-color: #1d2433; } .cv.tpl-mini .cvs span { border-color: #aab; } .cv.tpl-mini .cvp { background: #1d2433; }
.sk { display: inline-flex; align-items: center; gap: 4px; } .sk .ib { width: 24px; height: 24px; padding: 0; }
.ord .xtag { font-size: 13px; padding: 3px 10px; }
@media print { body * { visibility: hidden; } .cv, .cv * { visibility: visible; } .cv { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; } }
.ex-st { flex: 1 1 220px; min-width: 0; } .ex-st .chip { white-space: normal; height: auto; line-height: 1.35; padding-top: 4px; padding-bottom: 4px; max-width: 100%; }
@media (max-width: 760px) { .pmap { aspect-ratio: auto; height: 300px; min-height: 0; } .pmapw { grid-template-columns: 18px minmax(0, 1fr); } .pdot { max-width: 130px; } }
@media (min-width: 1101px) { .home.v2 { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 22px; align-items: start; } .home.v2 > .col { display: flex; } .home.v2 .col > * { order: 0; } }
.xrep th { width: 190px; vertical-align: top; text-align: left; } .xsr { margin-bottom: 4px; } .xsr b { font-weight: 600; }

@media (max-width: 640px) {
  .xtable.cmp-t thead { display: none; }
  .xtable.cmp-t, .xtable.cmp-t tbody { display: block; }
  .xtable.cmp-t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .xtable.cmp-t td { display: block; padding: 0; border: 0; min-width: 0; }
  .xtable.cmp-t td:first-child { grid-column: 1; align-self: center; }
  .xtable.cmp-t td:last-child { grid-column: 2; grid-row: 1; }
  .xtable.cmp-t td[data-l] { grid-column: 1 / -1; }
  .xtable.cmp-t td[data-l]::before { content: attr(data-l); display: block; font: 600 12.5px Rubik, sans-serif; color: #586375; margin-bottom: 3px; }
  .xtable.cmp-t td .inp { min-width: 0; width: 100%; }
}

/* ═════════ додаткові вправи ═════════ */
.qlist { display: grid; gap: 8px; }
.qlist .xp.card { width: 100%; border-radius: 12px; padding: 10px 14px; font-weight: 600; }
.qlist .hl, .qlist .opt { display: block; }
.hl { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; flex-wrap: wrap; }
.hl b { font-size: 15px; flex: 1 1 260px; }
.opt.ok .xp { border-color: var(--ok); background: #d9f3e3; } .opt.warn .xp { background: #fff4d6; }
.opt > p { margin: 4px 4px 0; color: #44506a; }
.cmt { display: grid; grid-template-columns: 96px minmax(0, 1fr) 28px; gap: 10px; align-items: center; margin: 8px 0; font-size: 14px; font-weight: 600; } .cmt b { text-align: right; font-family: Rubik, sans-serif; }
/* розмова */
.chat { display: grid; gap: 8px; padding: 2px; }
.msg { max-width: 92%; padding: 8px 12px; border-radius: 14px; border: 2px solid var(--line); background: #fff; display: grid; gap: 2px; font-size: 14px; }
.msg.me { justify-self: end; background: var(--sky); border-color: var(--ink); border-bottom-right-radius: 4px; }
.msg.her { justify-self: start; border-bottom-left-radius: 4px; } .msg.her > b { font: 700 12.5px Rubik, sans-serif; color: #44506a; }
.msg.her small { font-size: 12.5px; color: #44506a; border-top: 1px dashed var(--line); padding-top: 4px; margin-top: 2px; }
.msg.fact { border-color: var(--ok); background: #f1fbf5; } .msg.fog { border-color: #e0a100; background: #fffaf0; }
/* палітра */
.pswatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.psw { display: grid; gap: 2px; font-size: 12.5px; } .psw i { display: block; height: 56px; border-radius: 12px; border: 2px solid var(--ink); } .psw b { font: 600 12.5px Rubik, sans-serif; } .psw code { color: #586375; font-size: 12px; }
.pmock { margin-top: 10px; padding: 18px 20px; border-radius: 14px; border: 2px solid var(--ink); display: grid; gap: 8px; justify-items: start; }
.pmock h4 { font: 700 22px Rubik, sans-serif; margin: 0; } .pmock p { margin: 0; font-size: 14px; }
.pmock button { padding: 9px 18px; border-radius: 10px; font: 600 14px Rubik, sans-serif; border: 0; cursor: default; }
.pm-tag { font: 700 12px Rubik, sans-serif; padding: 2px 10px; border-radius: 999px; }
/* пре-мортем */
.prisk { display: grid; gap: 8px; }
.pr-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; align-items: center; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; }
.pr-row.hot { border-color: #e0503f; background: #fff6f4; }
.pr-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 13px Rubik, sans-serif; }
.pr-c small { display: block; color: #586375; font-size: 12px; margin-bottom: 2px; } .pr-c .xp { padding: 3px 10px; font-size: 13px; min-height: 30px; }
.pm-grid { display: grid; grid-template-columns: 22px 60px repeat(3, minmax(0, 1fr)); grid-auto-rows: 74px; gap: 4px; align-items: stretch; }
.pm-ax { grid-row: 1 / 4; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font: 600 13px Rubik, sans-serif; color: #586375; align-self: center; }
.pm-y, .pm-x { display: grid; place-items: center; color: #586375; font-size: 12px; } .pm-x { grid-row: auto; min-height: 20px; } .pm-grid > :nth-last-child(-n+4) { grid-auto-rows: auto; }
.pm-c { border-radius: 10px; border: 2px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; align-content: center; justify-content: center; padding: 4px; }
.pm-c.sl { background: #eaf7ef; } .pm-c.sm { background: #fff6d8; } .pm-c.sh { background: #ffe3de; }
.pm-c i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 12px Rubik, sans-serif; }
.pm-top { margin: 0; padding-left: 4px; list-style: none; display: grid; gap: 6px; }
/* календар грошей */
.cf-cal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cf-w { border: 2px solid var(--line); border-radius: 12px; padding: 6px 8px; display: grid; gap: 1px; background: #fff; font-size: 12.5px; align-content: start; min-height: 112px; }
.cf-w > b { font: 700 13px Rubik, sans-serif; color: #44506a; } .cf-w .pos { color: var(--ok); font-weight: 600; } .cf-w .out { color: #b4382b; font-weight: 600; }
.cf-w em { margin-top: auto; font: 700 13.5px Rubik, sans-serif; border-top: 1px dashed var(--line); padding-top: 3px; } .cf-w.neg { border-color: #e0503f; background: #fff1ee; } .cf-w.neg em { color: #b4382b; }
.neg { color: #b4382b; } .pos { color: var(--ok); }
/* подорож клієнта */
.jcurve { width: 100%; height: auto; display: block; }
/* пакети */
.pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.pkg { border: 2px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 4px; background: #fff; text-align: center; } .pkg.best { border-color: var(--ink); background: #fffbea; box-shadow: 0 3px 0 var(--ink); }
.pkg strong { font: 700 20px Rubik, sans-serif; } .pkg small { color: #586375; }
.pkrow { margin-bottom: 8px; }

.xrow.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .xrow.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xrow.g3 .xp, .xrow.g2 .xp { width: 100%; border-radius: 14px; }

.pr-row > b { grid-column: 2 / -1; grid-row: 1; } .pr-row .pr-n { grid-row: 1; } .pr-c { grid-row: 2; } .pr-c:nth-of-type(1) { grid-column: 2; } .pr-c:nth-of-type(2) { grid-column: 3; }
.ex-body.cols .xsl { grid-template-columns: minmax(0, 1fr) 76px; gap: 2px 10px; } .ex-body.cols .xsl > label { grid-column: 1 / -1; }
.ex-main, .ex-live { min-width: 0; }
.xp { max-width: 100%; } .xp > span { overflow-wrap: anywhere; }
.chart .legend { flex-wrap: wrap; gap: 4px 14px; }
.ex-live { grid-template-columns: minmax(0, 1fr); }
.ex-body:not(.cols) > .ex-live { gap: 18px; }

/* маршрут лише показує, де ви зараз: на етапи не клікають */
div.rs { cursor: default; } div.rs:not(.cur):hover { background: transparent; }
.rs .rt b { font-size: 14px; } .rail { padding: 8px; } .rs { padding: 7px 8px; gap: 10px; }

.md.stage-done .sd-big { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 50%; background: #d9f3e3; color: #14663a; }
.md.stage-done p { text-align: center; } .md.stage-done .row { justify-content: center; margin-top: 14px; }
.ex-btns .btn:not(.primary):not(.ghost) { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ivlist { display: grid; gap: 8px; } .ivh { border: 2px solid var(--line); border-radius: 12px; background: #fff; padding: 8px 12px; }
.ivh[open] { border-color: var(--ink); } .ivh summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; } .ivh .chat { margin-top: 10px; }
.ivh .chip.warn { background: #fff4d6; color: #8a5a00; }

/* приклади промптів для ШІ */
.ex-intro { position: relative; } .ex-intro > div { flex: 1; min-width: 0; padding-right: 56px; }
.ex-ai { position: absolute; top: 12px; right: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; min-height: 28px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: 700 12.5px Rubik, sans-serif; box-shadow: 0 2px 0 var(--ink); }
.ex-ai:hover { background: #f1f4f3; } .ex-ai:active { transform: translateY(2px); box-shadow: none; }
.ai-list { display: grid; gap: 10px; margin: 12px 0; } .ai-it { border: 2px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff; }
.ai-it header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .ai-it p { font-size: 14.5px; line-height: 1.5; color: #2b3447; margin: 0; }
.ai-tips { margin: 0; padding-left: 18px; color: #44506a; font-size: 13.5px; display: grid; gap: 3px; }

/* ═════════ брендова студія ═════════ */
.lgm .mono { font-weight: 800; line-height: 1; }
.bs-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .bs-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 2px solid var(--line); border-radius: 999px; background: #fff; font: 600 14px Rubik, sans-serif; color: #44506a; }
.bs-tabs button:hover { border-color: var(--ink); } .bs-tabs button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.bs-tpl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bs-t { text-align: left; border: 2px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; display: grid; gap: 6px; align-content: start; transition: transform .1s, border-color .1s; } .bs-t:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); }
.bs-t .lockup { padding: 8px 0; min-height: 60px; overflow: hidden; } .bs-t b { font: 700 15px Rubik, sans-serif; } .bs-t small { color: #586375; font-size: 13px; line-height: 1.35; }
.bs-shapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bs-sh { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border: 2px solid var(--line); border-radius: 12px; background: #fff; } .bs-sh small { font-size: 12px; color: #586375; text-align: center; } .bs-sh:hover { border-color: var(--ink); } .bs-sh.on { border-color: var(--ink); background: var(--yel); box-shadow: 0 2px 0 var(--ink); }
.bs-syms { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; } .bs-syms .sym { width: 100%; aspect-ratio: 1; } .bs-syms.off { opacity: .4; }
.bs-pals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bs-pal { height: 52px; border-radius: 12px; border: 2px solid var(--ink); color: #fff; text-align: left; padding: 0 8px 6px; display: flex; align-items: flex-end; font: 600 12px Rubik, sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.55); } .bs-pal:hover { transform: translateY(-2px); } .bs-pal.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.bs-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bs-f { text-align: left; border: 2px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff; display: grid; gap: 2px; } .bs-f > span { font-size: 26px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bs-f small { color: #586375; font-size: 12px; } .bs-f:hover { border-color: var(--ink); } .bs-f.on { border-color: var(--ink); background: var(--yel); box-shadow: 0 2px 0 var(--ink); }
.bs-score { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px 10px; align-items: baseline; margin-bottom: 12px; } .bs-score b { font: 800 44px/1 Rubik, sans-serif; } .bs-score span { color: #586375; font-weight: 600; } .bs-score .x-bar { align-self: center; }
.bs-sizes { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; } .bs-sizes figure, .bs-vers figure { margin: 0; display: grid; gap: 6px; justify-items: center; } figcaption { font-size: 12px; color: #586375; font-weight: 600; }
.bs-vers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .bs-vers figure { border: 2px solid var(--line); border-radius: 12px; padding: 14px 6px 10px; }
.bs-bgs .xp { padding: 3px 12px; min-height: 30px; }
.bs-stage { min-height: 200px; transition: background .2s; } .bs-stage.light { background: #fff; border: 2px solid var(--line); } .bs-stage.dark { background: #111827; border: 2px solid #111827; }
.bs-vars { display: grid; gap: 8px; } .bs-v { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; background: #fff; } .bs-vp { min-width: 0; overflow: hidden; }
/* макети */
.bs-mock { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 14px; } .bs-mock figure { margin: 0; display: grid; gap: 6px; justify-items: center; align-content: start; }
.bm-phone, .bm-card { grid-column: span 3; } .bm-site { grid-column: 1 / -1; } .bm-tee, .bm-ava, .bm-bag { grid-column: span 2; }
.ph { width: 132px; height: 188px; border: 3px solid var(--ink); border-radius: 24px; background: linear-gradient(160deg, #dfe6f3, #f3e9f7); padding: 28px 10px 10px; position: relative; } .ph::before { content: ''; position: absolute; top: 8px; left: 50%; width: 34px; height: 8px; margin-left: -17px; border-radius: 8px; background: var(--ink); }
.ph-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; justify-items: center; } .ph-g i { width: 22px; height: 22px; border-radius: 7px; } .ph-ap { display: contents; } .ph-ap .lgm { width: 22px !important; height: 22px !important; transform: scale(1.1); }
.bm-card { position: relative; min-height: 130px; justify-items: stretch !important; } .bc-f { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 12px; display: grid; gap: 8px; box-shadow: 0 3px 0 var(--ink); z-index: 1; } .bc-f p { margin: 0; font-size: 12.5px; line-height: 1.3; } .bc-f p span { color: #586375; } .bc-f .lockup { overflow: hidden; }
.bc-b { height: 46px; margin: -14px 14px 0; border-radius: 0 0 10px 10px; display: grid; place-items: center; border: 2px solid var(--ink); border-top: 0; }
.bm-site .browser { width: 100%; } .bm-site .bar2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .bm-site nav { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #44506a; } .bm-site nav b { color: #fff; padding: 5px 12px; border-radius: 8px; font-weight: 600; }
.hero { padding: 22px 16px; background: color-mix(in srgb, var(--c) 12%, #fff); } .hero h4 { margin: 0; font-size: 22px; line-height: 1.2; color: color-mix(in srgb, var(--c) 80%, #000); }
.bm-ava { gap: 8px !important; } .bm-ava .av { padding: 3px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; } .bm-ava .ap { display: grid; text-align: center; font-size: 13px; } .bm-ava .ap span { color: #586375; font-size: 12px; }
.bag { width: 104px; height: 112px; margin-top: 26px; background: var(--c); border-radius: 6px 6px 12px 12px; position: relative; display: grid; place-items: center; border: 2px solid var(--ink); } .bag::before { content: ''; position: absolute; top: -26px; left: 28%; width: 44%; height: 30px; border: 5px solid var(--ink); border-bottom: 0; border-radius: 24px 24px 0 0; }
@media (max-width: 760px) { .bs-tpl, .bs-fonts { grid-template-columns: 1fr; } .bs-shapes { grid-template-columns: repeat(3, 1fr); } .bs-syms { grid-template-columns: repeat(6, 1fr); } .bs-pals { grid-template-columns: repeat(2, 1fr); } .bs-vers { grid-template-columns: repeat(2, 1fr); } .bm-phone, .bm-card { grid-column: 1 / -1; } .bm-tee, .bm-ava, .bm-bag { grid-column: span 2; } }

.bs-t .lockup .lw { font-size: 19px !important; } .bs-t .lockup .lw small { font-size: 12px; } .bs-t .lockup.stack { gap: 6px; }
.bm-ava .av { display: grid; place-items: center; width: 78px; height: 78px; flex: none; } .bm-ava .av .lgm { display: grid; }
.bs-stage { overflow: hidden; padding: 12px; } .bs-stage .lockup { max-width: 100%; }

.bs-drop { display: grid; gap: 10px; justify-items: start; border: 2px dashed #b9c3cf; border-radius: 14px; padding: 16px; background: #fbfcfd; } .bs-drop p { margin: 0; }
.bs-img { display: flex; gap: 16px; align-items: center; } .bs-img > img { width: 92px; height: 92px; object-fit: contain; border: 2px solid var(--line); border-radius: 12px; background: repeating-conic-gradient(#f0f2f5 0 25%, #fff 0 50%) 0 0 / 14px 14px; flex: none; } .bs-imgc { min-width: 0; }
.lgm .lg-img { width: 100%; height: 100%; display: block; box-sizing: border-box; }

/* покрокові вправи: приклади, кроки, оцінки кружечками */
.ex-n { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 14px Rubik, sans-serif; flex: none; }
.xbox > header h3 { display: flex; align-items: center; }
.ex-eg { margin: 12px 0 0; padding: 9px 12px; border-left: 4px solid var(--yel); background: #fffdf2; border-radius: 0 10px 10px 0; font-size: 14px; color: #44506a; } .ex-eg b { color: #6b5200; }
.rdots { display: inline-flex; gap: 6px; } .rdot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; padding: 0; } .rdot:hover { background: #eef2ff; } .rdot.on { background: var(--acc); }
.cmpl { display: grid; gap: 8px; } .cmpi { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; } .cmpi > b { flex: 1 1 180px; font-size: 15px; } .cmpi .xp { padding: 3px 11px; min-height: 30px; font-size: 13px; }
.rcard { border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: #fff; } .rcard.me { border-color: var(--ink); background: #fffdf2; box-shadow: 0 3px 0 var(--ink); } .rcard h4 { font: 700 16px Rubik, sans-serif; margin: 0 0 6px; }
.rrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px dashed var(--line); } .rrow:first-of-type { border-top: 0; } .rrow > span:first-child { font-size: 14px; font-weight: 600; display: grid; } .rrow small { font-weight: 500; color: #586375; font-size: 12px; }
.cmpv { display: grid; gap: 10px; } .cpr { display: grid; gap: 3px; font-size: 14px; font-weight: 600; } .cpb { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 8px; align-items: center; } .cpb i { display: block; height: 12px; border-radius: 6px; border: 2px solid var(--ink); background: var(--acc); } .cpb i.av { background: #b9c3cf; border-color: #8a95a8; } .cpb b { font: 700 13px Rubik, sans-serif; text-align: right; }
.pl { display: grid; gap: 10px; } .pli { border: 2px solid var(--line); border-radius: 14px; padding: 10px 14px; background: #fff; } .pli.top { border-color: var(--ink); background: #fff6f4; box-shadow: 0 3px 0 var(--ink); }
.plh { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .plc { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: #44506a; } .plc > span { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .plc .xp { padding: 2px 10px; min-height: 28px; font-size: 13px; }
.quotes { display: grid; gap: 8px; margin-top: 10px; } .quotes blockquote { margin: 0; padding: 8px 12px; border-left: 4px solid var(--sky); background: #f3f8ff; border-radius: 0 10px 10px 0; } .quotes p { margin: 0; font-size: 14px; } .quotes cite { font-size: 12.5px; color: #586375; font-style: normal; }
.big-pain { margin: 0 0 12px; display: grid; gap: 2px; } .big-pain small { color: #586375; font-weight: 600; } .big-pain b { font: 700 20px/1.25 Rubik, sans-serif; }

/* запитання про нішу й вибір функцій першої версії */
.qrow { padding: 12px 0; border-top: 1px dashed var(--line); display: grid; gap: 6px; } .qrow:first-of-type { border-top: 0; padding-top: 2px; }
.qh { display: grid; } .qh b { font-size: 16px; } .qh small { color: #586375; font-size: 12.5px; font-weight: 600; }
.qs { display: flex; justify-content: space-between; gap: 10px; max-width: 218px; font-size: 12px; color: #586375; } .qrow .rdots { gap: 8px; } .qrow .rdot { width: 30px; height: 30px; }
.how { margin: 0; font-size: 13.5px; color: #44506a; }
.ownn { margin-top: 10px; border: 2px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff; }
.feats2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .feat2 { border: 2px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; display: grid; gap: 6px; align-content: start; transition: border-color .12s, background .12s; } .feat2.in { border-color: var(--ink); background: #f1fbf5; box-shadow: 0 3px 0 var(--ink); }
.feat2 .fh { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } .feat2 .fh b { font-size: 15px; } .feat2 p { margin: 0; font-size: 13.5px; color: #44506a; }
.fw { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .wk { font-size: 12.5px; color: #586375; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .wk i { width: 10px; height: 10px; border-radius: 3px; background: #d3dad8; } .wk i.on { background: #e0a100; }
.xp.tgl { padding: 3px 12px; min-height: 30px; font-size: 13px; } .xp.tgl.on { background: var(--ok); border-color: var(--ink); color: #fff; }
.mvpl { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 4px; font-size: 14px; } .mvpl li { display: flex; gap: 6px; align-items: center; } .mvpl .ic { color: var(--ok); }
@media (max-width: 760px) { .feats2 { grid-template-columns: 1fr; } }

/* вправи другого етапу */
.segc { display: inline-flex; align-items: center; gap: 4px; } .segc .ib { width: 30px; height: 30px; }
.w5r { padding: 10px 0; border-top: 1px dashed var(--line); display: grid; gap: 8px; } .w5r:first-of-type { border-top: 0; padding-top: 0; } .w5r > b { font-size: 15px; }
.portr { margin: 0; font-size: 15.5px; line-height: 1.55; } .portr b { color: #2b3447; }
.chlist { display: grid; gap: 8px; } .chrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; } .chrow.on { border-color: var(--ink); background: #fffbea; } .chrow small { flex: 1 1 100%; color: #586375; font-size: 13px; }
.sheetl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 14px; margin: 0; } .sheetl dt { font: 600 13px Rubik, sans-serif; color: #586375; } .sheetl dd { margin: 0; font-size: 14.5px; } .sheetl i { color: #5b6678; }
.smt { display: grid; gap: 8px; } .sm-i { display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 10px; align-items: center; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; } .sm-i b { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #eef2f1; font: 800 18px Rubik, sans-serif; color: #586375; } .sm-i span { font-weight: 600; display: grid; } .sm-i small { font-weight: 500; color: #586375; font-size: 12.5px; }
.sm-i.ok { border-color: var(--ok); background: #f1fbf5; } .sm-i.ok b { background: var(--ok); color: #fff; } .sm-i .ic { color: #5b6678; } .sm-i.ok .ic { color: var(--ok); }

/* бізнес-план: покрокова сторінка замість сітки Lean Canvas */
.bp { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; } .bp-side { position: sticky; top: 16px; }
.bp-g { margin-bottom: 18px; } .bp-g h3 { display: flex; align-items: center; font: 700 18px Rubik, sans-serif; margin-bottom: 10px; } .bp-g h3 small { margin-left: auto; color: #586375; font-size: 13px; font-weight: 600; }
.bp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .bp-grid.g3 .bp-b:last-child { grid-column: 1 / -1; }
.bp-b { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; align-content: start; } .bp-b.done { border-color: var(--ok); }
.bp-b header { display: flex; gap: 10px; align-items: flex-start; } .bp-b header div { display: grid; gap: 2px; min-width: 0; } .bp-b header b { font: 700 15.5px/1.25 Rubik, sans-serif; } .bp-b header small { color: #586375; font-size: 13px; } .bp-b header em { font-style: normal; font-size: 12px; color: #5b6678; }
.bp-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 13px Rubik, sans-serif; } .bp-b.done .bp-n { background: var(--ok); }
.bp-sum { margin: 12px 0; font-size: 14.5px; line-height: 1.55; } .bp-next { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 10px; background: var(--sky); font-size: 14px; } .bp-next.ok { background: #d9f3e3; }
.bp-eg { margin-top: 10px; font-size: 13.5px; color: #44506a; } .bp-eg summary { cursor: pointer; font-weight: 600; }
@media (max-width: 1100px) { .bp { grid-template-columns: 1fr; } .bp-side { position: static; order: -1; } } @media (max-width: 760px) { .bp-grid { grid-template-columns: 1fr; } }

/* редактор фото для знака */
.imged { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; } .imgl { display: grid; gap: 10px; justify-items: center; } .imgl small { color: #586375; font-size: 12.5px; text-align: center; }
.imgfr { width: 200px; height: 200px; overflow: hidden; background: repeating-conic-gradient(#f0f2f5 0 25%, #fff 0 50%) 0 0 / 16px 16px; cursor: grab; touch-action: none; box-shadow: 0 0 0 3px var(--ink); } .imgfr.drag { cursor: grabbing; } .imgfr img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; user-select: none; } .imgfr:focus-visible { outline: 3px solid var(--acc); outline-offset: 4px; }
.imgc .xsl { padding: 2px 0; }
@media (max-width: 760px) { .imged { grid-template-columns: 1fr; } }

/* Брендбук */
.bbook { background: #fff; border: 1px solid var(--bd, #e3e6ee); border-radius: 14px; padding: 18px; display: grid; gap: 14px; }
.bbook > header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--acc); padding-bottom: 8px; }
.bbook > header span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mu, #667); }
.bbook h4 { margin: 0 0 6px; font: 700 13px/1.3 Rubik, system-ui, sans-serif; color: var(--mu, #667); text-transform: uppercase; letter-spacing: .05em; }
.bbook p { margin: 0 0 6px; }
.bbook ul { margin: 0; padding-left: 18px; }
.bb-sw { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bb-sw li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bb-sw i { width: 30px; height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); flex: none; }
.bb-sw small { display: block; color: var(--mu, #667); font-size: 12px; }
.bb-v { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-v span { padding: 3px 10px; border-radius: 99px; background: var(--acc-bg, #eef0ff); color: var(--acc-tx, #3d3fb8); font-size: 13px; font-weight: 600; }
.bb-sl { font: italic 600 17px/1.4 Rubik, system-ui, sans-serif; }
.bbook .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bbook footer { border-top: 1px solid var(--bd, #e3e6ee); padding-top: 10px; }
.ex .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media print { .bbook footer { display: none; } }

/* старі стилі полотна (.cv-b.problem тощо) задають grid-area: у новому плані блоки йдуть по порядку */
.bp-b.cv-b { grid-area: auto; display: grid; }
.ws .k { font: 700 13px/1.2 Rubik, sans-serif; text-transform: uppercase; letter-spacing: .09em; color: var(--acc-tx, #4338ca); }

/* вступ до вправи: світліший, щоб увагу тримали самі завдання */
.ex-intro { background: #fff8d9; border: 1.5px solid #ecd978; box-shadow: none; padding: 12px 16px; gap: 14px; align-items: center; }
.ex-intro p { font-size: 15px; color: #2f2a18; }
.ex-intro small { color: #6b5200; }
.ex-ic { transform: scale(.85); transform-origin: left center; }

/* захист від вилазення: значення слайдерів, сітки й довгі слова */
.xsl { grid-template-columns: minmax(110px, 1fr) minmax(120px, 2fr) minmax(70px, max-content); }
.xsl output, .sl output { white-space: nowrap; }
.ex-body.cols .xsl { grid-template-columns: minmax(0, 1fr) minmax(76px, max-content); }
@media (max-width: 760px) { .xsl { grid-template-columns: minmax(0, 1fr) max-content; } }
.ex-body > *, .ex-main, .ex-live, .xbox, .xbox > *, .pmeth, .pmeth > * { min-width: 0; max-width: 100%; }
.xbox h3, .xbox h4, .pmeth h4, .xp, .xp span, .xf-l, .ax5 span, .fnl label, .fnl span, .browser, .browser * { overflow-wrap: anywhere; }
.ax5 span { hyphens: auto; }
.browser { max-width: 100%; }
.xbox, .ex-live > * { container-type: inline-size; }
@container (max-width: 560px) {
  .xsl, .ex-body.cols .xsl { grid-template-columns: minmax(0, 1fr) max-content; gap: 2px 10px; }
  .xsl > label { grid-column: 1; } .xsl > output { grid-column: 2; grid-row: 1; }
  .xsl > input { grid-column: 1 / -1; grid-row: 2; }
}
/* слайдер вправи: підпис і значення в рядку, повзунок на всю ширину — не вилазить у вузьких картках */
.xsl, .ex-body.cols .xsl { grid-template-columns: minmax(0, 1fr) max-content; gap: 2px 12px; }
.xsl > label { grid-column: 1; min-width: 0; } .xsl > output { grid-column: 2; grid-row: 1; }
.xsl > input { grid-column: 1 / -1; grid-row: 2; min-width: 0; width: 100%; }
.ax5 .xsl, .w5s .xsl { grid-template-columns: none; }
.fst > span { overflow-wrap: anywhere; hyphens: auto; font-size: 13.5px; } @media (max-width: 760px) { .fst { grid-template-columns: 128px minmax(0, 1fr); } }