/* Симулятор стартапу · стилі робочого простору засновника. Стиль «Дошка-мапа»: дошка в крапочку,
   стікери-завдання, пришпилені аркуші, кнопки з контуром, що «натискаються». Шрифти — локально, див. fonts/README.txt */
@font-face { font-family: Rubik; font-weight: 300 900; font-display: swap; src: url(fonts/rubik-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Rubik; font-weight: 300 900; font-display: swap; src: url(fonts/rubik-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Rubik; font-weight: 300 900; font-display: swap; src: url(fonts/rubik-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Golos Text'; font-weight: 400 900; font-display: swap; src: url(fonts/golos-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 400 900; font-display: swap; src: url(fonts/golos-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Golos Text'; font-weight: 400 900; font-display: swap; src: url(fonts/golos-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Caveat; font-weight: 400 700; font-display: swap; src: url(fonts/caveat-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Caveat; font-weight: 400 700; font-display: swap; src: url(fonts/caveat-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --acc: #4f46e5; --acc-soft: #6366f11a;
  --bg: #f5f6fa; --card: #fff; --line: #e6e8ef; --line2: #eef0f5;
  --tx: #111827; --tx2: #4b5563; --tx3: #6b7280;
  --ok: #15703c; --warn: #b45309; --bad: #b91c1c; --acc-tx: #4338ca;
  --ok-bg: #ecfdf3; --warn-bg: #fffbeb; --bad-bg: #fef2f2;
  --r: 14px; --sh: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --h0: #6366f1; --h1: #0ea5e9; --h2: #ec4899; --h3: #f59e0b; --h4: #16a34a; --h5: #8b5cf6; --h6: #14b8a6;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font: 15px/1.5 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--tx); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button:disabled { cursor: not-allowed; opacity: .5; }
:focus-visible { outline: 2.5px solid var(--acc); outline-offset: 2px; border-radius: 6px; }
.ic { flex: none; vertical-align: -3px; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; }
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 100; }

/* ── каркас ── */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--acc); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.badge.dot { min-width: 9px; width: 9px; height: 9px; padding: 0; }
.founder { display: flex; gap: 10px; align-items: center; } .founder b { display: block; font-size: 14px; } .founder small { color: var(--tx3); font-size: 12px; }
.av { --h: 220; width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: hsl(var(--h) 55% 32%); background: hsl(var(--h) 75% 92%); }
.logo { display: grid; place-items: center; flex: none; border-radius: 28%; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--lc) 82%, #fff), var(--lc)); box-shadow: 0 4px 12px color-mix(in srgb, var(--lc) 35%, transparent); }
/* верхня панель */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 8px 24px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); min-height: 64px; }
.tp-brand { display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0; border-radius: 12px; padding: 4px 6px 4px 2px; }
.tp-brand:hover { background: #f3f4f8; }
.tp-brand b { display: block; font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.tp-brand small { display: block; color: var(--tx3); font-size: 12.5px; white-space: nowrap; }
.tp-stats { display: flex; gap: 6px; flex: 1; justify-content: flex-end; min-width: 0; }
.tp-s { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 11px; background: #f3f4f8; color: var(--tx2); white-space: nowrap; }
.tp-s small { display: block; font-size: 12px; color: var(--tx3); line-height: 1.2; }
.tp-s b { display: block; color: var(--tx); font-weight: 700; font-size: 14px; line-height: 1.25; }
.tp-s.warn { background: var(--warn-bg); color: var(--warn); } .tp-s.bad { background: var(--bad-bg); color: var(--bad); } .tp-s.bad b { color: var(--bad); }
.end-week { white-space: nowrap; }
.ib-b { width: 40px; padding: 9px 0; }
.more-w { position: relative; }
.more-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 270px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 40px rgba(16,24,40,.16); padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 40; }
.more-pop .founder { padding: 8px 8px 12px; border-bottom: 1px solid var(--line2); margin-bottom: 4px; }
.more-pop > button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-weight: 500; text-align: left; }
.more-pop > button:hover { background: #f3f4f8; }
.more-pop > small { padding: 8px 10px 4px; color: var(--tx3); font-size: 12px; } .more-pop > small.warn { color: var(--warn); }
.founder .av { background: var(--acc-soft); color: var(--acc-tx); }

/* вкладки й розділи вкладки */
.navtabs { position: sticky; top: 64px; z-index: 25; background: rgba(245,246,250,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 8px 24px; }
.navtabs-in, .subtabs { display: flex; gap: 4px; max-width: 1280px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.navtabs-in::-webkit-scrollbar, .subtabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px; font-weight: 700; color: var(--tx2); white-space: nowrap; position: relative; }
.tab:hover { background: #fff; color: var(--tx); }
.tab.on { background: #fff; color: var(--acc-tx); box-shadow: var(--sh); }
.tab .badge { margin-left: 2px; }
.subtabs { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2); }
.st-it { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--tx2); border: 1px solid transparent; white-space: nowrap; }
.st-it:hover { background: #fff; border-color: var(--line); }
.st-it.on { background: var(--acc); color: #fff; }
.st-it.locked { color: #586375; }
.st-it.locked:hover { color: var(--tx2); }
.main { padding: 22px 24px 60px; max-width: 1280px; width: 100%; margin: 0 auto; }
.pg-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pg-h h1 { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.pg-h h1 .ic { color: var(--acc-tx); }

/* головна: етап, тиждень, наставниця, як справи */
.home { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.home .side-col { position: sticky; top: 190px; }
.fold > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--tx3); border-bottom: 2px solid var(--tx3); transform: rotate(45deg); transition: transform .2s; }
.fold[open] > summary::after { transform: rotate(-135deg); }
.fold[open] > summary { margin-bottom: 14px; }
.fold > summary .ic { color: var(--acc-tx); }
.fold h4 { font-size: 13.5px; color: var(--tx2); margin-bottom: 6px; }

/* ── загальні елементи ── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--sh); margin-bottom: 16px; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-h h3 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-h h3 .ic { color: var(--acc-tx); }
.grid { display: grid; gap: 16px; margin-bottom: 0; }
.grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.grid > .card { margin-bottom: 0; } .grid.g2 { margin-bottom: 16px; }
.col { display: flex; flex-direction: column; gap: 16px; } .col > .card { margin-bottom: 0; }
.row { display: flex; align-items: center; } .row.gap { gap: 8px; } .row.end { justify-content: flex-end; } .row.wrap { flex-wrap: wrap; } .row.sm { margin-top: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 14px; color: var(--tx); transition: background .15s, border-color .15s, transform .1s; text-decoration: none; }
.btn:hover:not(:disabled) { background: #f6f7fb; border-color: #d6d9e3; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.15); }
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--acc) 88%, #000); border-color: transparent; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--tx2); } .btn.ghost:hover:not(:disabled) { background: #f3f4f8; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; } .btn.ghost.danger { background: transparent; color: var(--bad); border-color: transparent; }
.btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn.lg { padding: 12px 22px; font-size: 15px; border-radius: 12px; }
.ib { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--tx2); }
.ib:hover { background: #f1f2f6; color: var(--tx); }
.link { color: var(--acc-tx); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: #f1f2f6; color: var(--tx2); white-space: nowrap; }
.chip.sm { padding: 1px 8px; font-size: 12px; }
.chip.ok { background: var(--ok-bg); color: var(--ok); } .chip.warn { background: var(--warn-bg); color: #b45309; } .chip.bad { background: var(--bad-bg); color: var(--bad); } .chip.acc { background: var(--acc-soft); color: var(--acc-tx); }
.muted { color: var(--tx3); } .sm { font-size: 13.5px; } p.sm { margin-top: 6px; }
.lead { color: var(--tx2); margin-bottom: 16px; max-width: 900px; font-size: 15px; }
.note { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; background: #f4f5f9; color: var(--tx2); font-size: 13.8px; margin-top: 10px; }
.note .ic { margin-top: 2px; } .note.ok { background: var(--ok-bg); color: #166534; } .note.warn { background: var(--warn-bg); color: #92400e; } .note.bad { background: var(--bad-bg); color: #991b1b; } .note.sm { font-size: 13px; padding: 7px 10px; }
.empty { color: var(--tx3); font-size: 13.5px; padding: 14px; text-align: center; }
.pos { color: var(--ok) !important; } .neg { color: var(--bad) !important; } .strike { text-decoration: line-through; color: var(--tx3) !important; } .warn-t { color: #b45309 !important; }
.big { font-size: 20px; margin: 6px 0; } .big b { font-size: 26px; }
.inp { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.inp:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.inp.sm { width: 120px; padding: 6px 10px; font-size: 13.5px; }
select.inp { width: auto; max-width: 100%; }
textarea.inp { resize: vertical; min-height: 70px; font-size: 14px; }
input[type=range] { accent-color: var(--acc-tx); width: 100%; height: 22px; cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--acc-tx); width: 16px; height: 16px; flex: none; }
output { font-weight: 600; font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 10px 0; }
.sl label { font-size: 14px; color: var(--tx2); }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tx2); cursor: pointer; margin: 8px 0; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { width: 38px; height: 22px; border-radius: 99px; background: #d1d5db; position: relative; transition: background .2s; flex: none; }
.switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.switch input:checked + span { background: var(--acc); } .switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2.5px solid var(--acc); outline-offset: 2px; }
.seg-ctl { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-ctl button { flex: 1 1 160px; text-align: left; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; }
.seg-ctl button b { display: block; font-size: 14px; } .seg-ctl button small { color: var(--tx3); font-size: 12.5px; line-height: 1.35; display: block; }
.seg-ctl button.on { border-color: var(--acc); background: var(--acc-soft); } .seg-ctl button.on b { color: var(--acc-tx); }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tabs button { padding: 9px 14px; font-weight: 600; color: var(--tx3); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; gap: 7px; align-items: center; }
.tabs button.on { color: var(--acc-tx); border-bottom-color: var(--acc); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--tx3); text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.tbl td:last-child, .tbl th:last-child { text-align: right; }
.tbl tr.sub td { color: var(--tx3); font-size: 13px; padding-top: 5px; padding-bottom: 5px; }
.tbl tr.tot td { font-weight: 700; border-top: 1.5px solid var(--line); }
.tbl tr.win td { background: var(--ok-bg); }
.tbl.sm { margin-top: 12px; font-size: 13px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; box-shadow: var(--sh); min-width: 0; }
.kpi-l { display: block; font-size: 12.5px; color: var(--tx3); font-weight: 500; }
.kpi > b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi small { color: var(--tx3); font-size: 12px; display: block; }
.kpi.warn { border-color: #fcd9a4; background: linear-gradient(#fff, #fffaf0); } .kpi.bad { border-color: #fbc2c2; background: linear-gradient(#fff, #fff5f5); } .kpi.bad > b { color: var(--bad); }
.dl { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; } .dl.up { color: var(--ok); } .dl.down { color: var(--bad); }
.meter { height: 7px; border-radius: 99px; background: #eceef4; overflow: hidden; margin: 5px 0; }
.meter i { display: block; height: 100%; border-radius: inherit; transition: width .4s; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-stats div { background: #f7f8fb; border-radius: 10px; padding: 9px 11px; } .mini-stats span { display: block; font-size: 12px; color: var(--tx3); } .mini-stats b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ins { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 10px 0; }
.ins > div { background: #f7f8fb; border-radius: 10px; padding: 9px 11px; min-width: 0; }
.ins span { display: block; font-size: 12px; color: var(--tx3); } .ins b { font-size: 16px; display: block; font-variant-numeric: tabular-nums; } .ins small { font-size: 12px; color: var(--tx3); display: block; }
.term { color: inherit; font-weight: inherit; text-decoration: underline dotted var(--acc); text-decoration-thickness: 1.5px; text-underline-offset: 3px; padding: 0; font-size: inherit; display: inline; }
.term:hover { color: var(--acc-tx); }
.term-pop { position: absolute; z-index: 300; background: #111827; color: #f3f4f6; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; box-shadow: 0 12px 32px rgba(0,0,0,.25); animation: pop .15s ease-out; }
.term-pop b { display: block; margin-bottom: 4px; color: #fff; }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } }
.stars { display: inline-flex; gap: 2px; } .stars i { width: 9px; height: 9px; border-radius: 2px; background: #e5e7eb; transform: rotate(45deg); } .stars i.on { background: #f59e0b; }
.dots { display: inline-flex; gap: 3px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: #e5e7eb; } .dots i.on { background: var(--acc); }

/* ── графіки ── */
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .g { stroke: #eef0f5; stroke-width: 1; } .chart .g.z { stroke: #cbd0dc; }
.chart .ax { fill: #6b7280; font-size: 12px; font-family: 'Golos Text', sans-serif; }
.chart-empty { height: 120px; display: grid; place-items: center; color: var(--tx3); font-size: 13.5px; background: #fafbfc; border-radius: 10px; border: 1px dashed var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--tx2); margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 170px 1fr 80px; align-items: center; gap: 10px; font-size: 14px; }
.bar-row .bl { color: var(--tx2); } .bar-row b { text-align: right; font-variant-numeric: tabular-nums; }
.bt { height: 22px; background: #f3f4f8; border-radius: 6px; overflow: hidden; } .bt i { display: block; height: 100%; border-radius: 6px; transition: width .5s; }

/* ── вікна, сповіщення ── */
.md-back { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.42); display: grid; place-items: center; padding: 20px; animation: fade .15s; }
.md-back.out { animation: fade .15s reverse forwards; }
@keyframes fade { from { opacity: 0; } }
.md { background: #fff; border-radius: 18px; width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto; box-shadow: 0 24px 60px rgba(15,23,42,.3); animation: rise .2s ease-out; }
.md.wide { width: min(760px, 100%); }
@keyframes rise { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.md-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 4px; position: sticky; top: 0; background: #fff; z-index: 1; }
.md-h h2 { font-size: 19px; font-weight: 800; }
.md-b { padding: 8px 20px 20px; }
.md-b > p { margin-bottom: 10px; }
.md.confirm .md-b .row { margin-top: 14px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 400; background: #111827; color: #fff; padding: 11px 16px; border-radius: 12px; display: flex; gap: 10px; align-items: center; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.good .ic { color: #4ade80; } .toast.bad .ic { color: #f87171; }

/* ── огляд ── */
.energy { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 12px; font-size: 14px; color: var(--tx2); }
.energy > span { display: flex; gap: 6px; align-items: center; }
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.ach { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 11px; background: #f7f8fb; color: var(--tx3); }
.ach b { display: block; font-size: 13.5px; color: var(--tx2); } .ach small { font-size: 12px; line-height: 1.35; display: block; }
.ach.on { background: linear-gradient(135deg, #fff7e0, #fff); border: 1px solid #fde4a6; color: #a14a07; } .ach.on b { color: var(--tx); }
.facts { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.steps { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.gloss { margin-top: 12px; max-height: 520px; overflow: auto; }
.gloss dt { font-weight: 700; margin-top: 12px; } .gloss dd { color: var(--tx2); font-size: 14px; }

/* ── пошта ── */
.mail { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.mail-list { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: auto; max-height: calc(100vh - 170px); }
.mail-it { display: flex; gap: 10px; width: 100%; text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line2); color: var(--tx2); }
.mail-it .ic { color: var(--tx3); margin-top: 3px; }
.mail-it > span { min-width: 0; } .mail-it b { display: block; font-size: 13px; color: var(--tx3); font-weight: 500; } .mail-it span span { display: block; font-size: 14px; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mail-it small { font-size: 12px; color: var(--tx3); }
.mail-it.unread span span { font-weight: 700; } .mail-it.unread .ic { color: var(--acc-tx); }
.mail-it.on { background: var(--acc-soft); } .mail-it:hover { background: #f7f8fb; }
.mail-view { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 26px; min-height: 300px; }
.mail-view header small { color: var(--tx3); } .mail-view h2 { font-size: 21px; margin: 4px 0 14px; }
.mail-body { color: var(--tx2); font-size: 15px; line-height: 1.65; }
.choices { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

/* ── клієнти ── */
.seg-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sh); }
.seg-card.target { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.seg-card header .btn { white-space: nowrap; }
.seg-card header { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.seg-card h3 { font-size: 16px; } .seg-card header small { color: var(--tx3); font-size: 12.5px; }
.seg-card .ins { grid-template-columns: 1fr 1fr; }
.seg-card footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.survey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.survey > div { background: #f7f8fb; border-radius: 12px; padding: 12px 14px; } .survey span { display: block; font-size: 12.5px; color: var(--tx3); } .survey b { font-size: 24px; } .survey ul { padding-left: 18px; font-size: 14px; margin-top: 4px; }
.iv-who { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: #f7f8fb; border-radius: 12px; }
.iv-who > div { flex: 1; } .iv-who b { display: block; } .iv-who small { color: var(--tx3); }
.chat { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; max-height: 330px; overflow: auto; }
.chat .q { align-self: flex-end; background: var(--acc); color: #fff; padding: 9px 13px; border-radius: 16px 16px 4px 16px; max-width: 80%; font-size: 14px; }
.chat .a { align-self: flex-start; background: #f1f2f6; padding: 9px 13px; border-radius: 16px 16px 16px 4px; max-width: 85%; font-size: 14.5px; animation: pop .2s; }
.iv-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.q-btn { text-align: left; padding: 10px 13px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; transition: border-color .15s, background .15s; }
.q-btn:hover { border-color: var(--acc); background: var(--acc-soft); }

/* ── бізнес-план ── */
.canvas { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-areas: 'problem problem solution solution uvp uvp advantage advantage segment segment' 'problem problem metrics metrics uvp uvp channels channels segment segment' 'costs costs costs costs costs revenue revenue revenue revenue revenue'; gap: 10px; }
.cv-b { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cv-b header b { display: block; font-size: 14px; } .cv-b header small { color: var(--tx3); font-size: 12px; line-height: 1.35; display: block; }
.cv-b.problem { grid-area: problem; } .cv-b.solution { grid-area: solution; } .cv-b.uvp { grid-area: uvp; background: var(--acc-soft); } .cv-b.advantage { grid-area: advantage; } .cv-b.segment { grid-area: segment; } .cv-b.metrics { grid-area: metrics; } .cv-b.channels { grid-area: channels; } .cv-b.costs { grid-area: costs; } .cv-b.revenue { grid-area: revenue; }
.cv-checks { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.cv-checks label { display: flex; gap: 7px; align-items: flex-start; cursor: pointer; line-height: 1.35; } .cv-checks input { margin-top: 1px; }
.cv-st { font-size: 12.5px; display: flex; gap: 6px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; margin-top: auto; } .cv-st .ic { margin-top: 1px; }
.cv-st.ok { background: var(--ok-bg); color: #166534; } .cv-st.warn { background: var(--warn-bg); color: #92400e; } .cv-st.bad { background: var(--bad-bg); color: #991b1b; }
.canvas.ro .cv-b p { font-size: 13.5px; color: var(--tx2); } .canvas.ro .chip { align-self: flex-start; margin-top: auto; }

/* ── продукт ── */
.launch { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 18px 22px; border-radius: var(--r); border: 1.5px dashed var(--line); background: #fff; margin-bottom: 16px; }
.launch h3 { display: flex; gap: 8px; align-items: center; font-size: 17px; } .launch p { color: var(--tx2); font-size: 14px; margin-top: 4px; }
.launch.ready { border-style: solid; border-color: var(--acc); background: linear-gradient(110deg, var(--acc-soft), #fff 70%); }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.kanban > section { background: #eef0f5; border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.kanban > section > header { display: flex; justify-content: space-between; padding: 4px 6px; font-size: 14px; } .kanban > section > header span { color: var(--tx3); font-weight: 600; }
.kb-card { background: #fff; border-radius: 11px; padding: 11px 12px; box-shadow: var(--sh); display: flex; flex-direction: column; gap: 6px; }
.kb-t { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } .kb-t b { font-size: 14px; line-height: 1.3; }
.kb-card p { font-size: 12.5px; color: var(--tx3); line-height: 1.4; }
.kb-f { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.pts { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--tx2); background: #f1f2f6; padding: 1px 7px; border-radius: 6px; }
.prog { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; } .prog small { font-size: 12px; color: var(--tx3); }
.kb-a { display: flex; justify-content: flex-end; } .kb-a .ib { width: 28px; height: 28px; }
.eta { font-size: 12px; color: var(--acc-tx); font-weight: 600; }
.kb-card .btn { align-self: flex-start; }
.sprint { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; } .sprint ul { list-style: none; margin-top: 8px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; } .sprint li.done { color: var(--ok); } .sprint small { color: var(--tx3); display: block; }
.sprint-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin: 10px 0 12px; font-size: 14px; }
.sprint-pick label { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; } .sprint-pick small { margin-left: auto; color: var(--tx3); }
.retro { margin-top: 14px; padding: 12px 14px; background: var(--acc-soft); border-radius: 12px; font-size: 14px; } .retro .row { margin-top: 8px; }

/* ── бренд ── */
.brand-prev { background: linear-gradient(150deg, color-mix(in srgb, var(--bc) 10%, #fff), #fff 60%); }
.bp-hero { display: flex; gap: 16px; align-items: center; } .bp-hero h2 { font-size: 30px; line-height: 1.1; color: var(--acc-tx); } .bp-hero p { color: var(--tx2); margin-top: 4px; }
.bp-pos { margin: 14px 0 4px; font-size: 14px; color: var(--tx2); font-style: italic; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.sw { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.sw.on { box-shadow: 0 0 0 2.5px var(--tx); }
.syms { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.sym { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--tx2); background: #fff; }
.sym.on { border-color: var(--acc); color: var(--acc-tx); background: var(--acc-soft); }
.pick4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pick { text-align: left; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; display: flex; flex-direction: column; gap: 6px; min-height: 84px; }
.pick small { color: var(--tx3); font-size: 12.5px; line-height: 1.4; } .pick b { font-size: 15px; }
.pick.on { border-color: var(--acc); background: var(--acc-soft); }
.radios { display: flex; flex-direction: column; gap: 6px; }
.radios label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 14px; background: #fff; }
.radios label input { margin-top: 3px; } .radios label.on { border-color: var(--acc); background: var(--acc-soft); }
.form2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.form2 label span { display: block; font-size: 13px; color: var(--tx3); margin-bottom: 4px; font-weight: 500; }

/* ── маркетинг ── */
.ch-row { display: grid; grid-template-columns: 40px minmax(200px, 1.3fr) minmax(200px, 1fr) 90px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.ch-row:last-child { border-bottom: 0; }
.ch-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--acc-soft); color: var(--acc-tx); display: grid; place-items: center; }
.ch-t b { display: block; font-size: 14.5px; } .ch-t small { display: block; font-size: 12.5px; color: var(--tx3); line-height: 1.4; } .ch-t .fit { color: var(--acc-tx); font-weight: 600; margin-top: 2px; }
.ch-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ch-ctl small { color: var(--tx3); font-size: 12.5px; }
.ch-v { text-align: right; } .ch-v b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; } .ch-v small { font-size: 12px; color: var(--tx3); }
.ch-row.wom .ch-ic { background: #ecfdf3; color: var(--ok); }
.stepper { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 2px; } .stepper b { min-width: 26px; text-align: center; }
.ab-res { margin-top: 14px; } .ab-res .btn { margin-top: 10px; }

/* ── акції ── */
.season { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 120px; }
.season div { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.season i { width: 100%; max-width: 34px; border-radius: 6px 6px 3px 3px; background: #dfe3ec; } .season small { font-size: 12px; color: var(--tx3); }
.season .now i { background: var(--acc); } .season .now small { color: var(--acc-tx); font-weight: 700; }
.promo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; } .promo h3 { font-size: 15px; display: flex; gap: 8px; align-items: center; } .promo h3 .ic { color: var(--acc-tx); } .promo p { font-size: 13.5px; color: var(--tx2); flex: 1; }
.promo .btn, .promo .chip { align-self: flex-start; } .promo.on { border-color: #bbe5c8; background: linear-gradient(#fff, #f6fdf8); }

/* ── ціна, фінанси ── */
.price-row { display: grid; grid-template-columns: 180px 1fr 120px 200px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.price-row > small { grid-column: 1 / -1; margin-top: -6px; font-size: 12.5px; }
.price-row b { display: block; } .price-row > div > small { color: var(--tx3); font-size: 12.5px; }
.price-row.target b { color: var(--acc-tx); }
.pf { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; color: var(--tx3); }
.opt { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left; background: #fff; }
.opt.on { border-color: var(--acc); background: var(--acc-soft); }
.plan-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0; }
.plan-in > div { background: #f7f8fb; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.plan-in label { font-size: 13px; color: var(--tx3); display: flex; flex-direction: column; gap: 4px; }
.cap { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; }
.pay { margin-bottom: 0; display: flex; flex-direction: column; gap: 6px; } .pay.on { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.pay-calc { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--tx2); background: #f7f8fb; border-radius: 10px; padding: 8px 10px; }
.pay-calc span:first-child { width: 100%; color: var(--tx3); }
.pay .row { margin-top: 6px; }

/* ── інвестори ── */
.inv { margin-bottom: 0; display: flex; flex-direction: column; gap: 6px; } .inv.hot { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.inv > p { color: var(--tx2); }
.needs { list-style: none; font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; margin: 4px 0 8px; }
.needs li { display: flex; gap: 6px; align-items: center; } .needs .no { color: var(--bad); } .needs .yes { color: var(--ok); font-weight: 600; }
.inv > .btn, .inv > .chip { align-self: flex-start; }
.offer { background: var(--acc-soft); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; } .offer small { color: var(--tx2); }
.deck { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.deck-list { padding-left: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.deck-list li { counter-increment: s; display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; background: #fff; }
.deck-list li span:first-child::before { content: counter(s) '. '; color: var(--tx3); font-weight: 600; }
.deck-list li.bad { border-color: #fbc2c2; background: var(--bad-bg); }
.deck-list .ib { width: 26px; height: 26px; }
.deck-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.deck-notes { font-size: 13.5px; color: #92400e; background: var(--warn-bg); border-radius: 10px; padding: 10px 10px 10px 28px; display: flex; flex-direction: column; gap: 4px; }
.asset { margin-bottom: 0; display: flex; flex-direction: column; gap: 6px; } .asset > .row { justify-content: flex-start; margin-top: auto; } .asset.scam { border-color: #fbc2c2; background: linear-gradient(#fff, #fff7f7); }

/* ── команда, фриланс ── */
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.members > .empty { grid-column: 1 / -1; }
.mb-skill { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--tx2); }
.member { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.member.cand { background: #fafbfd; }
.mb-h { display: flex; gap: 10px; align-items: center; } .mb-h > div { flex: 1; min-width: 0; } .mb-h b { display: block; font-size: 14.5px; } .mb-h small { color: var(--tx3); font-size: 12.5px; }
.mb-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13.5px; color: var(--tx2); } .mb-r b { color: var(--tx); }
.mb-r.m { grid-template-columns: 70px 1fr auto; }
.member p { flex: 1; }
.accept { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: #f7f8fb; border-radius: 10px; margin: 10px 0; font-size: 14px; }
.tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; }
.task { text-align: left; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.task small { color: var(--tx3); font-size: 12.5px; flex: 1; } .task span { font-size: 12.5px; font-weight: 700; color: var(--acc-tx); }
.task.on { border-color: var(--acc); background: var(--acc-soft); }
.fl-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.fl, .gig { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.gig { grid-template-columns: 1fr auto auto; margin-bottom: 8px; }
.fl b, .gig b { display: block; font-size: 14px; } .fl small, .gig small { color: var(--tx3); font-size: 12.5px; display: block; }
.gig .meter { min-width: 120px; }

/* ── майстер старту ── */
body.wz-on .app { filter: blur(3px); }
.wizard { position: fixed; inset: 0; z-index: 150; background: radial-gradient(1200px 600px at 20% 0%, #eef0ff, transparent), radial-gradient(900px 600px at 100% 100%, #e8f7ff, transparent), #f5f6fa; overflow: auto; display: grid; place-items: center; padding: 24px; }
.wz-card { width: min(920px, 100%); background: #fff; border-radius: 22px; box-shadow: 0 30px 80px rgba(15,23,42,.14), 0 0 0 1px var(--line); padding: 26px 30px; }
.wz-steps { display: flex; gap: 6px; margin-bottom: 22px; }
.wz-steps span { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--tx3); }
.wz-steps span::before { content: ''; height: 4px; border-radius: 4px; background: #e5e7eb; }
.wz-steps span.on, .wz-steps span.done { color: var(--acc-tx); } .wz-steps span.on::before, .wz-steps span.done::before { background: var(--acc); }
.wz-steps small { font-weight: 500; color: var(--tx3); }
.wz-steps .ic { display: inline; vertical-align: -2px; }
.wz-body h2 { font-size: 24px; font-weight: 800; margin-bottom: 14px; }
.wz-hero { text-align: center; padding: 10px 10px 0; } .wz-hero > .ic { color: var(--acc-tx); }
.wz-hero h1 { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin: 10px 0; }
.wz-hero > p { color: var(--tx2); max-width: 640px; margin: 0 auto; font-size: 16px; }
.wz-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 640px; margin: 18px auto; text-align: left; }
.wz-list li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #f7f8fb; border-radius: 12px; font-size: 14.5px; } .wz-list .ic { color: var(--acc-tx); }
.wz-ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wz-idea { text-align: left; padding: 16px; border: 2px solid var(--line); border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, transform .15s; }
.wz-idea:hover { transform: translateY(-2px); }
.wz-idea.on { border-color: var(--ic); background: color-mix(in srgb, var(--ic) 7%, #fff); }
.wz-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--ic); }
.wz-idea b { font-size: 17px; } .wz-idea p { color: var(--tx2); font-size: 14px; } .wz-idea small { color: var(--tx3); font-size: 12.5px; }
.wz-f { display: block; margin-bottom: 14px; } .wz-f span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.wz-bgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wz-bg { text-align: left; padding: 14px; border: 2px solid var(--line); border-radius: 14px; background: #fff; display: flex; flex-direction: column; gap: 6px; } .wz-bg .ic { color: var(--acc-tx); }
.wz-bg small { color: var(--tx3); font-size: 12.5px; } .wz-bg.on { border-color: var(--acc); background: var(--acc-soft); }
.wz-co { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; } .wz-co b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.wz-money { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; } .wz-money .opt b { font-size: 15px; } .wz-money small { color: var(--tx3); }
.wz-nav { display: flex; justify-content: space-between; margin-top: 24px; }

/* ── підсумки тижня, фінал, звіт ── */
.md.week .mini-stats { margin: 14px 0 4px; }
.wk-cash { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #f7f8fb; flex-wrap: wrap; }
.wk-cash small { display: block; font-size: 12px; color: var(--tx3); } .wk-cash b { font-size: 20px; font-variant-numeric: tabular-nums; } .wk-cash .dl { margin-left: auto; font-size: 15px; }
.wk-ach { display: grid; gap: 8px; margin-top: 12px; }
.md.week .row { margin-top: 18px; }
.md.ending .md-h h2 { font-size: 24px; } .md.ending .md-b > p { font-size: 16px; color: var(--tx2); }
.md.ending.sold .md-h h2 { color: var(--ok); } .md.ending.bankrupt .md-h h2 { color: var(--bad); }
.report .rp-h { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; } .report .rp-h > div { flex: 1; } .report h1 { font-size: 28px; } .report .rp-h p { color: var(--tx2); } .report .rp-h small { color: var(--tx3); }
.rp-end { font-size: 17px; font-weight: 600; margin: 8px 0 16px; padding: 12px 16px; background: var(--acc-soft); border-radius: 12px; }

/* ── адаптивність ── */
@media (max-width: 1180px) {
  .grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-row { grid-template-columns: 150px 1fr 110px; } .price-row .pf { grid-column: 1 / -1; }
  .canvas { grid-template-columns: 1fr 1fr; grid-template-areas: 'problem solution' 'uvp advantage' 'segment metrics' 'channels costs' 'revenue revenue'; }
  .pick4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* одна колонка: спершу етап, далі наставниця й цифри, потім тиждень */
  .home { display: flex; flex-direction: column; align-items: stretch; } .home > .col { display: contents; }
  .home .col > * { order: 4; } .home .mentor { order: 2; } .home .status { order: 3; }
}
@media (max-width: 960px) {
  .grid.g2, .mail, .sprint, .deck, .survey { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .ch-row { grid-template-columns: 40px 1fr 80px; } .ch-ctl { grid-column: 2 / -1; grid-row: 2; }
  .mail-list { max-height: 320px; }
  .wz-bgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .top { padding: 8px 12px; gap: 8px; min-height: 60px; }
  .tp-brand > span:last-child { display: none; } .hide-s { display: none; }
  .top-save span { display: none; } .top-save { padding: 9px 11px; }
  .navtabs { top: 60px; padding: 6px 10px; } .tab { padding: 8px 11px; } .tab span:not(.badge) { display: none; } .tab.on span { display: inline; }
  .end-week span { display: none; } .end-week { padding: 9px 12px; }
  .main { padding: 16px 14px 60px; }
  .pg-h h1 { font-size: 20px; }
  .card { padding: 14px; }
  .grid.g3 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kpi > b { font-size: 18px; }
  .mini-stats { grid-template-columns: repeat(2, 1fr); }
  .canvas { grid-template-columns: 1fr; grid-template-areas: 'problem' 'segment' 'uvp' 'solution' 'channels' 'revenue' 'costs' 'metrics' 'advantage'; }
  .pick4, .wz-ideas, .wz-list, .wz-money, .plan-in { grid-template-columns: 1fr; }
  .price-row { grid-template-columns: 1fr auto; } .price-row input { grid-column: 1 / -1; grid-row: 2; }
  .bar-row { grid-template-columns: 110px 1fr 60px; font-size: 13px; }
  .cap { grid-template-columns: 1fr; justify-items: center; }
  .launch { flex-direction: column; align-items: stretch; }
  .fl { grid-template-columns: auto 1fr; } .fl > div:nth-child(3) { grid-column: 2; } .fl .btn { grid-column: 1 / -1; }
  .gig { grid-template-columns: 1fr auto; } .gig .meter { grid-column: 1 / -1; }
  .sl { grid-template-columns: 1fr auto; } .sl input, .sl select { grid-column: 1 / -1; grid-row: 2; }
  .wz-card { padding: 20px 16px; } .wz-steps small { display: none; } .wz-hero h1 { font-size: 26px; }
  .md-back { padding: 10px; align-items: end; } .md { border-radius: 18px 18px 14px 14px; }
}
@media print {
  .top, .road, .navtabs, .no-print, .toast { display: none !important; }
  .app { display: block; } .main { padding: 0; max-width: none; } body { background: #fff; }
  .card, .kpi { box-shadow: none; break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── конструктор власної ідеї ── */
.wz-idea.own { border-style: dashed; }
.wz-idea.own.on { border-style: solid; }
.wz-form { display: flex; flex-direction: column; gap: 4px; }
.wz-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wz-kinds .opt small { color: var(--tx3); font-size: 12.5px; }
.wz-rows, .wz-feats { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.wz-row { display: grid; grid-template-columns: 1fr minmax(200px, 260px) auto; gap: 8px; align-items: center; }
.wz-row select.inp { width: 100%; }
.wz-feat { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #fafbfd; }
.wz-feat .sm-w { font-size: 13.5px; padding: 7px 11px; }
.wz-row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.wz-row2 .core { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; padding-right: 8px; border-right: 1px solid var(--line); }
.wz-segs { display: flex; gap: 12px; flex-wrap: wrap; }
.wz-segs label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.wz-body { max-height: calc(100vh - 230px); overflow: auto; padding: 2px; }
.guess { width: 100%; }
.guess td:first-child { font-weight: 600; }
.guess .y { color: var(--ok); font-weight: 600; } .guess .n { color: var(--tx3); }
.guess .miss { background: var(--warn-bg); }
@media (max-width: 640px) {
  .wz-kinds { grid-template-columns: 1fr; }
  .wz-row { grid-template-columns: 1fr auto; } .wz-row select.inp { grid-column: 1 / -1; grid-row: 2; }
  .wz-body { max-height: none; }
}
/* таблиці на телефоні: компактніше й з горизонтальною прокруткою, а не за межі екрана */
.ab-res { overflow-x: auto; }
@media (max-width: 640px) { .tbl th, .tbl td { padding: 7px 6px; } .tbl th { letter-spacing: 0; font-size: 12px; } }
.season { grid-template-columns: repeat(12, minmax(0, 1fr)); } .season small { overflow: hidden; max-width: 100%; }
.report .rp-h > div { min-width: 0; }
@media (max-width: 480px) { .season { gap: 2px; } .season small { font-size: 12px; } .report .rp-h { flex-wrap: wrap; } .report .rp-h > .row { flex: 1 1 100%; } }
/* збереження у файл */
.wz-open { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line2); }
.wz-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; } @media (max-width: 560px) { .wz-two { grid-template-columns: 1fr; } }
.file-sum td:first-child { color: var(--tx3); width: 40%; } .file-sum td:last-child { text-align: left; }
.file-open .note { margin: 12px 0; }
body.drop-on::after { content: 'Відпустіть файл, щоб відкрити гру'; position: fixed; inset: 12px; z-index: 300; display: grid; place-items: center; border: 3px dashed var(--acc); border-radius: 18px; background: rgba(255,255,255,.88); color: var(--acc-tx); font: 700 22px/1.3 Rubik, system-ui, sans-serif; pointer-events: none; }
/* журнал рішень */
.journal { max-height: 460px; overflow: auto; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line2); border-radius: 12px; }
.journal li { display: flex; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line2); font-size: 14px; } .journal li:last-child { border-bottom: 0; }
.journal li b { flex: none; width: 74px; color: var(--tx3); font-weight: 600; font-size: 13px; }
.rp-who { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; font-size: 14px; color: var(--tx2); }
@media print { .journal { max-height: none; overflow: visible; } .no-print { display: none !important; } }
.top-save { white-space: nowrap; flex: none; }
@media (max-width: 1180px) { .top-save span { display: none; } .top-save { padding-left: 11px; padding-right: 11px; } }
@media (max-width: 380px) {
  .top { gap: 6px; padding: 8px 8px; } .tp-s { padding: 6px 7px; }
  .top-save, .end-week { padding-left: 9px; padding-right: 9px; }
  .report .rp-h > .row { flex: 1 1 100%; } .report .rp-h .row .btn { flex: 1 1 100%; justify-content: center; white-space: normal; }
}

@media (max-width: 960px) { .hide-t { display: none; } .tp-brand b { max-width: 140px; } }

/* ═════════════ Стиль «Дошка-мапа» ═════════════ */
:root {
  --ink: #1D2433; --board: #F2F5F4; --dot: #d6dedb;
  --bg: var(--board); --line: #dfe5e3; --line2: #e9eeec; --tx: var(--ink); --tx2: #44506a; --tx3: #5b6678;
  --yel: #FFE680; --pink: #FFC9D9; --mint: #C9F0DA; --sky: #CFE3FF; --tan: #FF7A1A; --ok: #15703c;
  --r: 18px; --sh: 0 3px 0 var(--ink); --press: 0 3px 0 var(--ink);
}
body { background: var(--board) radial-gradient(var(--dot) 1.3px, transparent 1.3px) 0 0 / 24px 24px; }
h1, h2, h3, h4, .pg-h h1, .md-h h2 { font-family: Rubik, 'Golos Text', sans-serif; font-weight: 700; letter-spacing: 0; }
.hand, .hand-s { font-family: Caveat, 'Golos Text', cursive; }

/* кнопки: контур і тінь, при натисканні «втискаються» */
.btn { font-family: Rubik, sans-serif; font-weight: 600; border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--press); background: #fff; color: var(--ink); }
.btn:hover:not(:disabled) { background: #fff; border-color: var(--ink); filter: brightness(.97); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: var(--acc); border-color: var(--ink); color: #fff; box-shadow: var(--press); }
.btn.primary:hover:not(:disabled) { background: var(--acc); border-color: var(--ink); filter: brightness(.94); }
.btn.ghost { border-color: transparent; box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: rgba(29,36,51,.06); border-color: transparent; }
.btn.danger { background: var(--bad); color: #fff; border-color: var(--ink); }
.btn.sm { border-radius: 10px; box-shadow: 0 2px 0 var(--ink); }
.btn.sm.ghost { box-shadow: none; }
.btn:disabled { box-shadow: none; }
.ib { border-radius: 10px; }
.link { color: #2b4fc7; }

/* верхня панель: плаваюча, з контуром */
.top { margin: 10px auto 0; width: min(1240px, calc(100% - 24px)); top: 8px; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; min-height: 62px; padding: 8px 10px 8px 8px; }
.tp-brand b { font-family: Rubik, sans-serif; font-size: 17px; }
.tp-s { background: var(--board); border-radius: 12px; }
.tp-s b { font-family: Rubik, sans-serif; font-weight: 600; }
.btn.end-week { background: var(--tan); color: var(--ink); }
.btn.end-week:hover:not(:disabled) { background: var(--tan); }
.more-pop { border: 2px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }


/* вкладки */
.navtabs { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; padding: 4px 12px 0; }
.navtabs-in, .subtabs { max-width: 1240px; }
.tab { font-family: Rubik, sans-serif; font-weight: 600; border: 2px solid transparent; border-radius: 12px; color: var(--tx2); }
.tab:hover { background: rgba(255,255,255,.7); }
.tab.on { background: #fff; border-color: var(--ink); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.tab .badge { background: var(--tan); }
.subtabs { border-top: 0; padding: 4px 0 2px; margin-top: 10px; }
.st-it { font-family: Rubik, sans-serif; font-weight: 500; border: 2px solid transparent; }
.st-it:hover { background: #fff; border-color: var(--line); }
.st-it.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.st-it.locked { color: #586375; }
.main { padding-top: 18px; }

/* картки й аркуші */
.card, .kpi { border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); border-radius: var(--r); }
.kpi { border-radius: 16px; }
.kpi > b { font-family: Rubik, sans-serif; font-weight: 700; }
.kpi.warn { border-color: var(--ink); background: #fff8e8; } .kpi.bad { border-color: var(--ink); background: #fff1f1; }
.card .card, .card .kpi { box-shadow: none; border-width: 1.5px; border-color: var(--line); }
.card-h h3 { font-size: 17px; }
.chip { font-family: Rubik, sans-serif; font-weight: 600; }
.mini-stats div { background: var(--board); }
.mini-stats b { font-family: Rubik, sans-serif; font-weight: 600; }
.note { background: #fff; border: 1.5px dashed #c7d0cd; }
.inp { border: 2px solid #c9d2cf; border-radius: 11px; }
.inp:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--acc-soft); }
.opt, .seg-ctl button { border: 2px solid #c9d2cf; }
.opt.on, .seg-ctl button.on { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.tbl th { text-transform: none; letter-spacing: 0; font-size: 12.5px; }

/* головна: тиждень, наставниця */
.home { gap: 26px; }
.pin { position: relative; background: #fff; border-radius: 4px; padding: 22px 20px 18px; margin-bottom: 26px; box-shadow: 0 12px 24px -16px rgba(29,36,51,.6), 0 0 0 1px rgba(29,36,51,.06); }
.pin::before { content: ''; position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #E5484D; box-shadow: inset -3px -3px 0 rgba(0,0,0,.22); }
.pin.status { transform: rotate(.6deg); }
.pin h3 { font-size: 19px; margin-bottom: 4px; }
.mentor .mt-h { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.mentor .face { width: 46px; height: 46px; border-radius: 50%; background: #FFD6A8; border: 2px solid var(--ink); display: grid; place-items: center; font: 700 16px Rubik, sans-serif; flex: none; }
.mentor.urgent .face { background: #ffb3b3; }
.mentor .mt-h b { display: block; font: 700 16px Rubik, sans-serif; } .mentor .mt-h small { color: var(--tx3); font-size: 13px; }
.mentor .hand { font: 500 16px/1.5 'Golos Text', sans-serif; color: #23409f; margin-bottom: 12px; padding-left: 12px; border-left: 3px solid #b9c7f2; }
.mentor.urgent .hand { color: #b42318; }
.mt-l { font: 600 13px Rubik, sans-serif; color: var(--tx3); margin: 14px 0 4px; }
.mt-more { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; padding: 0; }
.mt-more li { padding-left: 14px; position: relative; } .mt-more li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.mt-more .link { text-align: left; font-size: 13.5px; font-weight: 500; }
.status .st-row { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 9px 0; border-bottom: 2px dashed var(--line2); align-items: baseline; }
.status .st-row:last-child { border-bottom: 0; }
.status .st-row > span { color: var(--tx2); font-size: 14px; }
.status .st-row > b { font: 600 16px Rubik, sans-serif; text-align: right; }
.status .st-row > small { grid-column: 1 / -1; text-align: right; font-size: 12px; color: var(--tx3); }
.status .st-row.ok > b { color: var(--ok); } .status .st-row.warn > b { color: #b45309; } .status .st-row.bad > b { color: var(--bad); }
.sheet .hand-s { font-size: 22px; font-weight: 700; color: var(--tx2); margin-left: 6px; }
.hcols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.hcol { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.hcol .tube { width: 100%; height: 118px; border: 2px solid var(--ink); border-radius: 14px; background: var(--board); position: relative; overflow: hidden; cursor: ns-resize; }
.hcol .tube i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--acc); transition: height .2s; }
.hcol[data-k="rest"] .tube i { background: #F2A900; }
.hcol .ht { display: flex; align-items: center; gap: 4px; font: 600 13px Rubik, sans-serif; margin-top: 4px; }
.hcol .ht .ic { color: var(--tx3); }
.hcol output { font: 700 15px Rubik, sans-serif; }
.hcol small { font-size: 12px; color: var(--tx3); line-height: 1.2; min-height: 14px; }
.hr-pm { display: flex; gap: 6px; margin-top: 2px; }
.hr-pm .ib { width: 34px; height: 34px; border: 2px solid var(--ink); background: #fff; box-shadow: 0 2px 0 var(--ink); }
.hr-pm .ib:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.hr-pm .ib:disabled { border-color: #c9d2cf; box-shadow: none; }

/* модальні вікна й майстер */
.md { border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink), 0 24px 60px rgba(15,23,42,.25); }
.md-h { background: #fff; }
.wizard { background: var(--board) radial-gradient(var(--dot) 1.3px, transparent 1.3px) 0 0 / 24px 24px; }
.wz-card { border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.wz-idea { border: 2px solid #c9d2cf; }
.wz-idea.on { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.wz-idea b { font-family: Rubik, sans-serif; font-weight: 600; }
.wz-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wz-f.sm > span { font-size: 13px; }
.num-w { width: 120px; flex: none; }
.wz-check { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding: 0; }
.wz-check li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; font-size: 14.5px; }
.wz-check li.ok { background: var(--ok-bg); } .wz-check li.ok .ic { color: var(--ok); }
.wz-check li.warn { background: #fff4d6; } .wz-check li.warn .ic { color: #b45309; }
.passport { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; margin-bottom: 12px; }
.passport dt { color: var(--tx3); } .passport dd { margin: 0; }
.tbl td.ok { color: var(--ok); font-weight: 600; } .tbl td.warn { color: #b45309; font-weight: 600; }

@media (max-width: 960px) {
  .hcols { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 16px; }
}
@media (max-width: 640px) {
  .top { width: calc(100% - 16px); margin-top: 8px; }
  .wz-three { grid-template-columns: 1fr; }
  .passport { grid-template-columns: 1fr; }
  .hcols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hcol:last-child:nth-child(3n + 1) { grid-column: 2; }
  .hcol .ht { font-size: 12.5px; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) { .hcol .tube i, .btn { transition: none; } .btn:active:not(:disabled) { transform: none; } }
@media print { body { background: #fff; } .card, .kpi { box-shadow: none; } }

/* ═════════════ Читабельність: контраст ≥ 4,5:1, текст не дрібніший за 12 px, цілі для пальця ═════════════ */
small { font-size: max(12.5px, .85em); }
.tab .badge, .tab.on .badge { background: var(--tan); color: var(--ink); font-size: 12.5px; }
.hcol small { font-size: 12.5px; }
.tp-s small { font-size: 12px; }
.tp-brand { flex: none; }
.wz-steps small { font-size: 12px; }
.wz-steps span { font-size: 13px; }
.ins small, .ch-v small, .season small, .sprint-pick small, .wz-f small, label small { font-size: 12.5px; }
.chip.sm { font-size: 12px; }
.chart .ax { font-size: 12px; }
.mt-more, .mt-more .link { font-size: 14px; }
.ib { min-width: 36px; min-height: 36px; }
.md-h .ib { width: 40px; height: 40px; }
.status .st-row > small { font-size: 12.5px; }
.kpi small, .kpi-l { font-size: 13px; }
.mini-stats span { font-size: 12.5px; }
.radios label.on .chip { background: #fff; }
.av { color: hsl(var(--h) 60% 26%); }

/* ═════════════ Простота: простий режим, підказки розділів, підсвітка цілі ═════════════ */
body.simple .adv { display: none; }
.view-hint { display: flex; gap: 12px; align-items: flex-start; background: var(--yel); padding: 12px 14px; border-radius: 4px; margin: -4px 0 18px; box-shadow: 0 8px 14px -10px rgba(29,36,51,.5); max-width: 860px; }
.view-hint .ic { flex: none; margin-top: 2px; color: #6b4600; }
.view-hint p { flex: 1; font-size: 15px; line-height: 1.5; color: var(--ink); }
.view-hint .btn { flex: none; }
@keyframes flash-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,26,0); } 30%, 70% { box-shadow: 0 0 0 6px rgba(255,122,26,.75); } }
.flash { animation: flash-ring 1.2s ease-in-out 2; border-radius: 12px; position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; outline: 4px solid var(--tan); outline-offset: 3px; } }
.wz-h2 { margin-top: 22px; }
.wk-say { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; margin-bottom: 12px; color: var(--ink); }
.wk-say .ic { flex: none; margin-top: 2px; color: var(--acc-tx); }
.sheet .card-h .row { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .view-hint { flex-wrap: wrap; } .view-hint .btn { margin-left: 30px; } }

.road { padding: 0 12px; }

/* створення компанії за етапами */
.wz-stage { margin: 0 0 6px; font-size: 13px; color: var(--tx2); } .wz-stage b { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--acc-bg, #eef0ff); color: var(--acc-tx); font-weight: 700; margin-right: 4px; }
.wz-route { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 700px; margin: 18px auto; padding: 0; text-align: left; counter-reset: none; }
.wz-route li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #f7f8fb; border-radius: 12px; font-size: 14.5px; font-weight: 600; }
.wz-route li span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: #fff; font-size: 13px; font-weight: 700; }
.wz-later { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: #f7f8fb; font-size: 14px; color: var(--tx2); } .wz-later .ic { flex: none; color: var(--acc-tx); margin-top: 2px; }
.wz-later p, .wz-later ul { margin: 4px 0 0; } .wz-later ul { padding-left: 18px; }
@media (max-width: 640px) { .wz-route { grid-template-columns: 1fr; } }

@media (max-width: 1000px) { .hide-m { display: none; } }

/* верхня панель й вкладки: більше повітря навколо */
.top { margin-top: 18px; top: 10px; min-height: 68px; padding: 10px 14px 10px 14px; gap: 16px; box-shadow: 0 5px 0 var(--ink); }
.navtabs { padding: 18px 12px 6px; } .navtabs-in { gap: 8px; padding: 2px 2px 6px; }
.tab { padding: 10px 18px; }
.main > .ex, .main > .home, .main > .pg, .main > * { scroll-margin-top: 90px; }
@media (max-width: 640px) { .top { margin-top: 8px; top: 6px; padding: 8px 8px; min-height: 60px; } .navtabs { padding: 12px 8px 4px; } .tab { padding: 8px 11px; } }

/* майстер створення: стабільна висота, рівні підписи кроків, компактні картки ідей */
.wz-steps span { gap: 4px; }
.wz-steps i { font-style: normal; height: 18px; display: flex; align-items: center; line-height: 1; }
.wz-steps small { line-height: 1.2; }
.wz-body { min-height: min(500px, calc(100vh - 230px)); }
.wz-ideas { gap: 10px; }
.wz-idea { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; padding: 14px 16px; }
.wz-idea .wz-ic { grid-row: 1 / span 3; }
.wz-idea.own { grid-column: 1 / -1; }
.wz-sub { margin: -2px 0 10px; }
@media (max-width: 760px) { .wz-body { min-height: 0; } }
.wz-body .wz-f:has(+ .wz-sub) { margin-bottom: 0; }

/* майстер створення: два стовпці, праворуч жива картка компанії */
.wz-card { width: min(1140px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; }
.wz-card.solo { grid-template-columns: minmax(0, 1fr); width: min(920px, 100%); }
.wz-card.solo .wz-prev { display: none; }
.wz-main { min-width: 0; }
.wz-prev { align-self: start; position: sticky; top: 0; border-left: 2px dashed #d7dce6; padding-left: 26px; display: grid; gap: 18px; }
.wzp-top { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 22px 16px; border-radius: 18px; background: color-mix(in srgb, var(--pc) 9%, #fff); border: 2px solid color-mix(in srgb, var(--pc) 30%, #fff); transition: background .25s, border-color .25s; }
.wzp-k { font: 600 11.5px/1 Rubik, sans-serif; text-transform: uppercase; letter-spacing: .09em; color: var(--tx3); }
.wzp-top b { font: 700 22px/1.2 Rubik, sans-serif; overflow-wrap: anywhere; } .wzp-top small { color: var(--tx2); font-size: 14px; }
.wzp-top .wzp-ph, .wzp-f .wzp-ph { color: var(--tx3); font-weight: 500; }
.wzp-f { margin: 0; display: grid; gap: 2px; }
.wzp-f div { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid #e8ebf2; }
.wzp-f dt { font-size: 12px; color: var(--tx3); } .wzp-f dd { margin: 0; font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .wz-card { grid-template-columns: minmax(0, 1fr); } .wz-prev { display: none; } }

/* інтерв'ю: вибір запитання */
.iv-pick { margin: 4px 0 10px; font: 700 15px Rubik, sans-serif; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .iv-pick small { font: 500 13px 'Golos Text', sans-serif; color: var(--tx3); }
.iv-qs .q-btn { display: flex; gap: 10px; align-items: flex-start; line-height: 1.35; padding: 11px 13px; } .iv-qs .q-btn .ic { flex: none; margin-top: 2px; color: var(--acc-tx); }
.iv .chat { max-height: 260px; }
@media (max-width: 760px) { .iv-qs { grid-template-columns: minmax(0, 1fr); } }
.iv .chat { display: flex; flex-direction: column; }

/* читабельність: вимкнені кнопки лишаються читабельними, а не напівпрозорими */
.btn:disabled { opacity: 1; background: #e8ebf0; color: #556072; border-color: #c4cad6; box-shadow: none; cursor: not-allowed; }
.btn.primary:disabled { background: #d9dde6; color: #475166; border-color: #b9c0cd; }
.btn:disabled .ic { opacity: .8; }

/* підказка до розділу: коротка спокійна смужка замість великої жовтої наліпки */
.view-hint { background: #fff8d9; border: 1.5px solid #ecd978; border-radius: 12px; padding: 8px 12px; margin: -4px 0 14px; box-shadow: none; align-items: center; }
.view-hint p { font-size: 14px; line-height: 1.45; color: #3b3320; }
.view-hint .ic { margin-top: 0; color: #7a5a00; }
.view-hint .btn { padding: 4px 10px; font-size: 13px; }
.seg-card header { min-height: 58px; } .seg-card .ins { margin-top: 2px; }
.form2 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* посилання в текстових блоках: колір акценту замість стандартного синього; відступ перед кнопками довідника */
.card a:not(.btn), .md a:not(.btn) { color: var(--acc-tx, #4338ca); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
.card a:not(.btn):hover { color: var(--acc); }
.card ul + .row { margin-top: 14px; }
.rp-h { align-items: flex-start; } .rp-h h1 { margin-top: 0; line-height: 1.15; } .rp-h > .lgm, .rp-h > .logo { flex: none; }