:root {
    --bg: #f4f5f8;
    --surface: #ffffff;
    --surface-2: #eceef3;
    --text: #16202e;
    --muted: #4d586a;
    --border: #d7dce4;
    --accent: #f5b301;
    --accent-ink: #3a2c00;
    --primary: #16202e;
    --primary-text: #ffffff;
    --link: #1d4ed8;
    --ok: #106b3c;
    --ok-bg: #d7f0e2;
    --info: #1e50b3;
    --info-bg: #dde8fb;
    --warn: #7a5200;
    --warn-bg: #fdeec4;
    --danger: #9b1c1c;
    --danger-bg: #fbdcdc;
    --neutral: #444f60;
    --neutral-bg: #e2e6ec;
    --highlight: #fff3c4;
    --hl-round-bg: #fffaeb;
    --hl-fund-bg: #f1fbf5;
    --shadow: 0 1px 3px rgba(22,32,46,.08), 0 4px 16px rgba(22,32,46,.06);
  }
  [data-theme="dark"] {
    --bg: #0e131c;
    --surface: #182031;
    --surface-2: #1f293d;
    --text: #e9edf4;
    --muted: #a6b0c0;
    --border: #2c3850;
    --accent: #f5b301;
    --accent-ink: #3a2c00;
    --primary: #f5b301;
    --primary-text: #241c00;
    --link: #8ab4ff;
    --ok: #6fdca4;
    --ok-bg: #123425;
    --info: #9dbdf7;
    --info-bg: #16294d;
    --warn: #f2cd6e;
    --warn-bg: #3a2f10;
    --danger: #f1a0a0;
    --danger-bg: #431717;
    --neutral: #b6c0d0;
    --neutral-bg: #273246;
    --highlight: #4a3d10;
    --hl-round-bg: #221c0a;
    --hl-fund-bg: #10261a;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
    background: var(--bg); color: var(--text);
    min-height: 100vh; transition: background .2s, color .2s;
  }
  .iconbtn {
    border:1px solid var(--border); background:var(--surface); color:var(--text);
    width:36px; height:36px; border-radius:10px; cursor:pointer; font-size:16px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .iconbtn:hover { background:var(--surface-2); }
  .langbtn { width:auto; padding:0 12px; font-size:13px; font-weight:700; }

  .screen { display:none; }
  .screen.active { display:block; }

  /* ---------- rozcestnik ---------- */
  .hub {
    min-height: calc(100vh - 57px); display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:48px 20px; gap:40px;
  }
  .hub h1 { font-size:clamp(22px,4vw,32px); font-weight:800; letter-spacing:-.02em; }
  .hub .sub { color:var(--muted); font-size:15px; margin-top:6px; text-align:center; }
  .hub-cards { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
  .hub-card {
    width:300px; background:var(--surface); border:1px solid var(--border);
    border-radius:20px; padding:36px 28px; text-align:center; cursor:pointer;
    box-shadow:var(--shadow); transition: transform .15s;
  }
  .hub-card:hover { transform: translateY(-4px); }
  .hub-card .emoji { font-size:64px; line-height:1; }
  .hub-card h2 { font-size:20px; margin-top:16px; font-weight:800; }
  .hub-card p { color:var(--muted); font-size:14px; margin-top:8px; line-height:1.5; }
  .hub-card .cta {
    display:inline-block; margin-top:18px; padding:9px 22px; border-radius:999px;
    font-size:14px; font-weight:700;
  }
  .hub-card.leo .cta { background:var(--accent); color:var(--accent-ink); }
  .hub-card.idea .cta { background:var(--primary); color:var(--primary-text); }
  .hub-foot { color:var(--muted); font-size:12px; }

  /* ---------- login ---------- */
  .login-wrap { min-height:calc(100vh - 57px); display:flex; align-items:center; justify-content:center; padding:24px; }
  .login-card {
    width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border);
    border-radius:20px; padding:40px 36px; box-shadow:var(--shadow);
  }
  .login-card .logo { font-size:40px; text-align:center; }
  .login-card h1 { font-size:22px; font-weight:800; text-align:center; margin-top:10px; }
  .login-card .sub { color:var(--muted); font-size:14px; text-align:center; margin-top:6px; }
  .field { margin-top:18px; }
  .field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
  .field input, .field textarea, .field select {
    width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:10px;
    background:var(--bg); color:var(--text); font-size:14px; font-family:inherit;
  }
  .field textarea { min-height:90px; resize:vertical; line-height:1.5; }
  .field input:focus, .field textarea:focus, .field select:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 20px; border-radius:10px; border:none; cursor:pointer;
    font-size:14px; font-weight:700; font-family:inherit;
  }
  .btn-primary { background:var(--primary); color:var(--primary-text); width:100%; margin-top:22px; }
  .btn-primary:hover { opacity:.9; }
  .login-card .forgot { display:block; text-align:center; margin-top:16px; font-size:13px; color:var(--link); text-decoration:none; }
  .login-card .forgot:hover { text-decoration:underline; }

  /* ---------- app frame (fond / detail / novy) ---------- */
  .appbar {
    display:flex; align-items:center; gap:14px; padding:14px 24px;
    background:var(--surface); border-bottom:1px solid var(--border);
  }
  .appbar .brand { font-weight:800; font-size:16px; display:flex; align-items:center; gap:8px; }
  .appbar nav { display:flex; gap:4px; margin-left:12px; }
  .appbar nav a {
    padding:7px 14px; border-radius:8px; font-size:13.5px; font-weight:600;
    color:var(--muted); text-decoration:none; cursor:pointer;
  }
  .appbar nav a.active { background:var(--surface-2); color:var(--text); }
  .appbar nav a:hover { color:var(--text); }
  .appbar .spacer { flex:1; }
  /* Siedmy tab (Web) pretlacil ovladacie prvky vpravo mimo obrazovku okolo
     900px a cela stranka zacala skrolovat do boku. Namiesto skracovania nazvov
     sa lista zalomi do dvoch riadkov. */
  @media (max-width: 900px) {
    .appbar { flex-wrap:wrap; row-gap:10px; }
    .appbar nav { flex-wrap:wrap; margin-left:0; order:3; width:100%; }
    .appbar .spacer { order:2; }
    .appbar .headctl { order:1; }
  }
  .avatar {
    width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
    display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
  }
  .page { max-width:1180px; margin:0 auto; padding:28px 24px 64px; }
  .page-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
  .page-head h1 { font-size:24px; font-weight:800; letter-spacing:-.01em; }
  .page-head .spacer { flex:1; }

  .filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
  .fpill {
    padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:600;
    border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer;
  }
  .fpill.active { background:var(--primary); color:var(--primary-text); border-color:var(--primary); }
  .fpill:hover:not(.active) { background:var(--surface-2); color:var(--text); }

  .idea-list { display:flex; flex-direction:column; gap:12px; }
  .idea-row {
    display:flex; align-items:center; gap:16px; background:var(--surface);
    border:1px solid var(--border); border-left:4px solid var(--border);
    border-radius:14px; padding:16px 20px; box-shadow:var(--shadow);
  }
  .idea-row:hover { border-color:var(--accent); }
  /* Marked into the next round = yellow, in the fund = green. The tint is kept
     close to the surface so the text keeps its contrast in both themes. */
  .idea-row.hl-round  { border-left-color:var(--warn); background:var(--hl-round-bg); }
  .idea-row.hl-fund   { border-left-color:var(--ok);   background:var(--hl-fund-bg); }
  .idea-row.hl-archiv { background:var(--surface-2); }
  .idea-row.hl-round:hover, .idea-row.hl-fund:hover, .idea-row.hl-archiv:hover { border-color:var(--accent); }
  .idea-row .t { flex:1; min-width:200px; text-decoration:none; color:inherit; }
  .idea-row h3 { font-size:15.5px; font-weight:700; }
  .idea-row .d { color:var(--muted); font-size:13px; margin-top:3px; line-height:1.4; }
  .idea-row .meta { display:flex; align-items:center; gap:14px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
  .idea-row .who { font-size:12.5px; color:var(--muted); white-space:nowrap; }
  .idea-row .cmt { font-size:12.5px; color:var(--muted); white-space:nowrap; }
  .pool-note { margin-top:12px; }
  .chip {
    font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:999px; white-space:nowrap;
  }
  .chip.vlozeny   { background:var(--neutral-bg); color:var(--neutral); }
  .chip.validacia { background:var(--warn-bg); color:var(--warn); }
  .chip.fond      { background:var(--ok-bg); color:var(--ok); }
  .chip.predany   { background:var(--info-bg); color:var(--info); }
  .chip.vyradeny  { background:var(--danger-bg); color:var(--danger); }
  .chip.archiv    { background:var(--neutral-bg); color:var(--neutral); border:1px dashed var(--neutral); }

  /* One-click picker in the row — plain submit buttons, so it works with JS off. */
  .pick { display:flex; gap:6px; flex-wrap:wrap; }
  .pick-btn {
    font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px; white-space:nowrap;
    border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer;
  }
  .pick-btn:hover { border-color:var(--accent); color:var(--text); }
  .pick-btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
  .pick-btn.on.validacia { background:var(--warn-bg);    color:var(--warn);    border-color:var(--warn); }
  .pick-btn.on.fond      { background:var(--ok-bg);      color:var(--ok);      border-color:var(--ok); }
  .pick-btn.on.archiv    { background:var(--neutral-bg); color:var(--neutral); border-color:var(--neutral); }

  /* ---------- detail ---------- */
  .detail-grid { display:grid; grid-template-columns: 1fr 320px; gap:24px; align-items:start; }
  @media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
  .doc { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px 32px; box-shadow:var(--shadow); }
  .doc .sec { padding:18px 0; border-bottom:1px solid var(--border); }
  .doc .sec:last-child { border-bottom:none; }
  .doc .sec h4 {
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.09em;
    color:var(--muted); margin-bottom:8px;
  }
  .doc .sec p { font-size:14.5px; line-height:1.65; }
  .doc .sec ul { font-size:14.5px; line-height:1.65; margin:0 0 0 20px; }
  .doc .sec h3 { font-size:13.5px; font-weight:700; margin:14px 0 6px; }
  .doc code { background:var(--surface-2); color:var(--text); border-radius:4px; padding:1px 6px; font-size:.92em; }
  mark { background:var(--highlight); color:inherit; border-radius:3px; padding:1px 2px; cursor:pointer; box-shadow: 0 2px 0 var(--accent); }
  .stepper { display:flex; gap:0; flex-wrap:wrap; margin-bottom:20px; }
  .step { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted); }
  .step .dot { width:10px; height:10px; border-radius:50%; background:var(--border); }
  .step.done .dot, .step.now .dot { background:var(--accent); }
  .step.now { color:var(--text); font-weight:800; }
  .step .bar { width:34px; height:2px; background:var(--border); margin:0 8px; }
  .step.done .bar { background:var(--accent); }
  .side { display:flex; flex-direction:column; gap:14px; }
  .panel { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow); }
  .panel h4 { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:12px; }
  /* The separator belongs to the thread, not to the comment: a reply sits
     under its root without a line cutting between them. */
  .thread { padding:12px 0; border-top:1px solid var(--border); }
  .thread:first-of-type { border-top:none; padding-top:0; }
  .comment { padding:12px 0; border-top:1px solid var(--border); }
  .comment:first-of-type { border-top:none; padding-top:0; }
  .thread .comment { padding:0; border-top:none; }
  .thread .comment + .comment { margin-top:12px; }
  .comment.reply { margin-left:13px; padding-left:11px; border-left:2px solid var(--border); }
  .comment .head { display:flex; align-items:center; gap:8px; }
  .comment .who { font-size:13px; font-weight:700; }
  .comment .when { font-size:11.5px; color:var(--muted); }
  .comment .quote {
    font-size:12px; color:var(--muted); border-left:3px solid var(--accent);
    padding:2px 0 2px 10px; margin:7px 0; font-style:italic; line-height:1.4;
  }
  .comment .body { font-size:13.5px; line-height:1.5; }
  .comment .edited { font-size:11.5px; color:var(--muted); margin-top:4px; font-style:italic; }
  .cmt-edit summary { font-size:12.5px; color:var(--link); cursor:pointer; margin-top:6px; }
  .cmt-edit .field { margin-top:8px; }
  .cmt-del { margin-top:10px; }
  .cmt-del summary { font-size:12.5px; color:var(--danger); cursor:pointer; }
  .cmt-del .hint { margin:8px 0; font-size:12px; }
  .btn-danger { background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger); font-size:13px; padding:8px 14px; }
  .btn-danger:hover { background:var(--danger); color:var(--surface); }
  .cmt-edit textarea { font-size:13px; }
  .cmt-reply summary { font-size:12.5px; color:var(--link); cursor:pointer; margin-top:10px; }
  .cmt-reply .field { margin-top:8px; }
  .cmt-reply textarea { font-size:13px; }
  .hint { font-size:12.5px; color:var(--muted); line-height:1.5; }
  .btn-ghost { background:var(--surface-2); color:var(--text); font-size:13px; padding:9px 14px; }
  .btn-ghost:hover { background:var(--border); }
  .btn-sm-primary { background:var(--primary); color:var(--primary-text); font-size:13px; padding:9px 14px; }

  /* ---------- novy napad ---------- */
  .form-card { max-width:760px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px 36px; box-shadow:var(--shadow); }
  .form-card .req { color:var(--danger); }
  .form-actions { display:flex; gap:10px; margin-top:26px; }
  .form-actions .btn-primary { width:auto; margin-top:0; }

  /* ---------- comment interaction ---------- */
  .selbtn {
    position:absolute; z-index:60; display:none; align-items:center; gap:6px;
    background:var(--primary); color:var(--primary-text);
    border:none; border-radius:999px; padding:7px 14px;
    font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
    box-shadow:var(--shadow);
  }
  .sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .composer {
    position:absolute; z-index:61; display:none; width:300px;
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:14px; box-shadow:var(--shadow);
  }
  .composer .quote {
    font-size:12px; color:var(--muted); border-left:3px solid var(--accent);
    padding:2px 0 2px 10px; margin-bottom:10px; font-style:italic; line-height:1.4;
    max-height:60px; overflow:hidden;
  }
  .composer textarea {
    width:100%; min-height:70px; padding:9px 11px; border:1px solid var(--border);
    border-radius:9px; background:var(--bg); color:var(--text); font-size:13px;
    font-family:inherit; resize:vertical; line-height:1.5;
  }
  .composer textarea:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
  .composer .row { display:flex; gap:8px; margin-top:10px; justify-content:flex-end; }
  .comment.flash { animation: flash 1.2s; }
  @keyframes flash { 0%,60% { background:var(--highlight); } 100% { background:transparent; } }

  .toast {
    position:fixed; bottom:24px; right:24px; background:var(--primary); color:var(--primary-text);
    padding:12px 20px; border-radius:12px; font-size:13.5px; font-weight:600;
    box-shadow:var(--shadow); opacity:0; transform:translateY(8px); transition:.25s; pointer-events:none;
  }
  .toast.show { opacity:1; transform:none; }

  .idea-row a.t { text-decoration:none; color:inherit; }
  .unanchored { opacity:.75; }
  .unanchored .quote { border-left-color: var(--muted); }
  .error-banner { background: var(--danger-bg); color: var(--danger); border-radius:10px; padding:10px 14px; font-size:13.5px; margin-bottom:14px; }

  /* ---------- partner profiles ---------- */
  .profile-list { display:flex; flex-direction:column; gap:16px; }
  .profile-card { padding:20px 26px 6px; }
  .profile-head { display:flex; align-items:center; gap:14px; padding-bottom:14px; }
  .profile-head h3 { font-size:16px; font-weight:800; }
  .profile-head .you { font-size:12px; font-weight:600; color:var(--muted); }
  .profile-head .headline { color:var(--muted); font-size:13.5px; margin-top:3px; line-height:1.45; }
  .profile-head .spacer { flex:1; }
  .profile-card .sec { border-top:1px solid var(--border); border-bottom:none; }
  .profile-card .sec p { white-space:pre-wrap; }
  .gate-banner {
    background:var(--warn-bg); color:var(--warn); border-radius:10px;
    padding:12px 16px; font-size:13.5px; line-height:1.55; margin-bottom:18px;
  }
  .field.first { margin-top:0; }
  .headctl { display:flex; gap:8px; align-items:center; }
  .headctl form { display:inline; }

  /* ---------- proces ---------- */
  .pc-hero { text-align:center; padding:8px 0 6px; }
  .pc-kicker {
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
    color:var(--muted);
  }
  .pc-hero h1 { font-size:clamp(24px,4vw,34px); font-weight:800; letter-spacing:-.02em; margin-top:8px; }
  .pc-lead { max-width:720px; margin:12px auto 0; color:var(--muted); font-size:15px; line-height:1.65; }
  .pc-lead-sm { margin:0 0 14px; font-size:14px; }

  .pc-sec-label {
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.09em;
    color:var(--muted); margin:36px 0 12px;
  }
  .pc-sec-hint { font-weight:600; text-transform:none; letter-spacing:0; }

  .pc-example { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 26px; box-shadow:var(--shadow); }
  .pc-example-head { display:flex; align-items:center; gap:13px; margin-bottom:12px; }
  .pc-example-icon {
    width:36px; height:36px; border-radius:10px; background:var(--surface-2);
    display:inline-flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
  }
  .pc-example h3 { font-size:16px; font-weight:800; }
  .pc-example-tags { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:3px; }
  .pc-example p { font-size:14.5px; line-height:1.7; margin-top:11px; }

  .pc-live { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .pc-live-cell { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
  .pc-live-num { font-size:26px; font-weight:800; line-height:1.1; }
  .pc-live-label { font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.4; }
  .pc-live-run .pc-live-num { color:var(--info); }
  .pc-live-go .pc-live-num { color:var(--ok); }
  .pc-live-walk .pc-live-num { color:var(--danger); }

  .pc-flow {
    display:flex; flex-wrap:wrap; align-items:center; gap:7px;
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:18px 20px; box-shadow:var(--shadow);
  }
  .pc-flow-node {
    text-decoration:none; color:inherit; border:1px solid var(--border); background:var(--surface-2);
    border-radius:10px; padding:8px 12px; max-width:158px;
  }
  .pc-flow-node:hover { border-color:var(--accent); }
  .pc-flow-node:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .pc-flow-inner { display:flex; flex-direction:column; gap:2px; }
  .pc-flow-no { font-size:10px; font-weight:800; letter-spacing:.1em; opacity:.75; }
  .pc-flow-title { font-size:12.5px; font-weight:700; line-height:1.3; }
  .pc-flow-gate { background:var(--warn-bg); color:var(--warn); border-color:transparent; }
  .pc-flow-final { box-shadow:0 0 0 2px var(--accent); }
  .pc-flow-go { background:var(--ok-bg); color:var(--ok); border-color:transparent; }
  .pc-flow-walk { background:var(--danger-bg); color:var(--danger); border-color:transparent; }
  .pc-flow-arrow { color:var(--muted); font-size:13px; }

  .pc-steps { list-style:none; display:flex; flex-direction:column; gap:14px; }
  .pc-step { display:grid; grid-template-columns:38px 1fr; gap:14px; align-items:start; scroll-margin-top:80px; }
  .pc-step-mark {
    width:38px; height:38px; border-radius:50%; margin-top:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:11.5px; font-weight:800; letter-spacing:.04em;
    background:var(--surface-2); color:var(--muted); border:1px solid var(--border);
  }
  .pc-step-gate .pc-step-mark { background:var(--warn-bg); color:var(--warn); border-color:transparent; }
  .pc-step-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px 24px; box-shadow:var(--shadow); }
  .pc-step-gate .pc-step-card { border-left:3px solid var(--warn); }
  .pc-step-final .pc-step-card { border-left:3px solid var(--accent); }
  .pc-step-meta { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); }
  .pc-step-card h3 { font-size:17px; font-weight:800; margin-top:5px; letter-spacing:-.01em; }
  .pc-step-card p { font-size:14.5px; line-height:1.7; margin-top:9px; }
  .pc-bullets { margin:11px 0 0 19px; font-size:14px; line-height:1.75; }
  .pc-bullets li::marker { color:var(--accent); }

  .pc-checks { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
  .pc-check {
    display:flex; gap:9px; background:var(--surface-2); border-radius:10px;
    padding:11px 13px; font-size:13.5px; line-height:1.5;
  }
  .pc-check-mark { color:var(--ok); font-weight:800; flex-shrink:0; }

  .pc-table-wrap { overflow-x:auto; }
  .pc-table {
    width:100%; min-width:520px; border-collapse:collapse; background:var(--surface);
    border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  }
  .pc-table th {
    text-align:left; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
    color:var(--muted); padding:13px 16px; border-bottom:1px solid var(--border);
  }
  .pc-table td { padding:13px 16px; font-size:14px; line-height:1.55; border-top:1px solid var(--border); }
  .pc-table tbody tr:first-child td { border-top:none; }
  .pc-td-strong { font-weight:700; white-space:nowrap; }
  .pc-lvl {
    display:inline-flex; align-items:center; justify-content:center;
    width:27px; height:27px; border-radius:8px; font-size:12.5px; font-weight:800;
    background:var(--surface-2); color:var(--muted);
  }
  .pc-lvl-1, .pc-lvl-2 { background:var(--danger-bg); color:var(--danger); }
  .pc-lvl-3 { background:var(--warn-bg); color:var(--warn); }
  .pc-lvl-4, .pc-lvl-5 { background:var(--ok-bg); color:var(--ok); }

  .pc-outcomes { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px; scroll-margin-top:80px; }
  .pc-outcome { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px 24px; box-shadow:var(--shadow); }
  .pc-outcome-go { border-left:3px solid var(--ok); }
  .pc-outcome-walk { border-left:3px solid var(--danger); }
  .pc-badge {
    display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase;
    letter-spacing:.09em; padding:4px 11px; border-radius:999px;
  }
  .pc-badge-go { background:var(--ok-bg); color:var(--ok); }
  .pc-badge-walk { background:var(--danger-bg); color:var(--danger); }
  .pc-outcome h3 { font-size:16.5px; font-weight:800; margin-top:11px; }

  .pc-equity-title { font-size:clamp(19px,3vw,24px); font-weight:800; text-align:center; margin-bottom:16px; letter-spacing:-.01em; }
  .pc-equity { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .pc-equity-cell { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 18px; text-align:center; box-shadow:var(--shadow); }
  .pc-equity-num { font-size:30px; font-weight:800; letter-spacing:-.02em; }
  .pc-equity-label { font-size:12.5px; color:var(--muted); margin-top:7px; line-height:1.45; }
  .pc-note { max-width:720px; margin:18px auto 0; text-align:center; font-size:13px; color:var(--muted); line-height:1.7; }

  @media (max-width: 760px) {
    .pc-live { grid-template-columns:repeat(2,1fr); }
    .pc-checks { grid-template-columns:1fr; }
    .pc-outcomes { grid-template-columns:1fr; }
    .pc-equity { grid-template-columns:1fr; }
    .pc-step { grid-template-columns:1fr; gap:8px; }
    .pc-step-mark { margin-top:0; }
  }

  /* Appbar sa na úzkom displeji zalomí — so šiestou položkou (Proces) by inak
     navigácia utiekla mimo obrazovku a tab by bol na mobile nedostupný. */
  @media (max-width: 760px) {
    .appbar { flex-wrap:wrap; padding:12px 16px; gap:10px; }
    .appbar nav { order:3; width:100%; margin-left:0; overflow-x:auto; }
    .appbar nav a { white-space:nowrap; }
  }

  .pc-open {
    display:flex; gap:13px; align-items:flex-start;
    max-width:760px; margin:20px auto 0;
    background:var(--warn-bg); border-radius:14px; padding:15px 18px;
  }
  .pc-open p { font-size:13.5px; line-height:1.65; color:var(--warn); }
  .pc-badge-open { background:var(--warn); color:var(--warn-bg); flex-shrink:0; }

  /* ---------- pripomienky k procesu ---------- */
  .pc-cmt { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
  .pc-cmt-standalone { margin-top:14px; }
  .pc-cmt-standalone .pc-cmt { border-top:none; padding-top:0; margin-top:0; }
  .pc-cmt-item { background:var(--surface-2); border-radius:12px; padding:12px 14px; margin-bottom:9px; }
  .pc-cmt-done { opacity:.6; }
  .pc-cmt-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  .pc-cmt-av { width:24px; height:24px; font-size:9.5px; }
  .pc-cmt-who { font-size:13px; font-weight:700; }
  .pc-cmt-when { font-size:11.5px; color:var(--muted); }
  .pc-cmt-flag {
    font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
    background:var(--ok-bg); color:var(--ok); border-radius:999px; padding:3px 9px;
  }
  .pc-cmt-sp { flex:1; }
  .pc-cmt-btn {
    border:1px solid var(--border); background:var(--surface); color:var(--muted);
    border-radius:8px; padding:4px 10px; font-size:11.5px; font-weight:700;
    font-family:inherit; cursor:pointer;
  }
  .pc-cmt-btn:hover { color:var(--text); background:var(--bg); }
  .pc-cmt-body { font-size:13.5px; line-height:1.6; margin-top:8px; white-space:pre-wrap; }
  .pc-cmt-add summary {
    display:inline-block; font-size:12.5px; font-weight:700; color:var(--muted);
    cursor:pointer; padding:5px 11px; border:1px solid var(--border);
    border-radius:999px; list-style:none;
  }
  .pc-cmt-add summary::-webkit-details-marker { display:none; }
  .pc-cmt-add summary:hover { color:var(--text); border-color:var(--accent); }
  .pc-cmt-add[open] summary { margin-bottom:10px; }
  .pc-cmt-add textarea {
    width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
    background:var(--bg); color:var(--text); font-size:13.5px; font-family:inherit;
    line-height:1.55; resize:vertical;
  }
  .pc-cmt-add textarea:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
  .pc-cmt-add button { margin-top:9px; }
  .pc-flow-cmt { font-weight:700; letter-spacing:0; }

  /* ---------- web (navrh one-pagera) ---------- */
  /* Port makety docs/superpowers/specs/2026-08-05-web-tab-mockup.html. Hexy z
     makety su nahradene premennymi appky, aby tab zil oboma temami.

     Hero a sekcia "vyzva" su v makete plne tmave bloky. V tmavej teme je vsak
     --primary zlta, takze doslovny port by cely blok zozltil. Riesi sa to
     lokalnymi premennymi --wb-ink-*: definuju sa raz na bloku a v tmavej teme
     sa raz prepisu. Preto v tele blokov nie je ziadna farba natvrdo. */
  .page.web { max-width:920px; }

  .wb-draft {
    background:var(--warn-bg); color:var(--warn); border-radius:10px;
    padding:11px 16px; font-size:13px; font-weight:600; line-height:1.5; margin-bottom:16px;
  }

  .wb-hero, .wb-sec { scroll-margin-top:80px; border-radius:16px; }
  .wb-sec { margin-top:16px; padding:34px 38px; background:var(--bg); border:1px solid var(--border); }
  /* V makete sa sekcie striedaju papier / biela; tu to robi pozadie karty. */
  .wb-sec-fit, .wb-sec-protocol, .wb-sec-people { background:var(--surface); box-shadow:var(--shadow); }

  .wb-label {
    font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
    color:var(--muted); margin-bottom:13px;
  }
  .wb-sec h2 {
    font-size:clamp(21px,3.4vw,27px); line-height:1.2; font-weight:800;
    letter-spacing:-.015em; margin-bottom:11px;
  }
  .wb-lead-sm { font-size:15px; line-height:1.65; color:var(--muted); max-width:60ch; }

  /* ---- hero a vyzva: plne bloky ---- */
  .wb-hero, .wb-sec-cta {
    --wb-ink-fg: var(--primary-text);
    --wb-ink-mut: #c3cbd8;
    --wb-ink-line: #2c3850;
    --wb-ink-field: #1f293d;
    background:var(--primary); color:var(--wb-ink-fg); border:1px solid var(--primary);
  }
  .wb-hero { padding:44px 38px 34px; }
  .wb-hero h1 {
    font-size:clamp(30px,6.4vw,46px); line-height:1.04; font-weight:800;
    letter-spacing:-.03em; margin-bottom:18px;
  }
  .wb-kicker {
    font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
    color:var(--accent); margin-bottom:15px;
  }
  .wb-hero .wb-lead { font-size:16px; line-height:1.6; color:var(--wb-ink-mut); max-width:54ch; }

  .wb-strip {
    display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
    margin:30px 0 26px; padding-top:24px; border-top:1px solid var(--wb-ink-line);
  }
  .wb-strip-i { display:flex; gap:11px; align-items:center; }
  .wb-strip-i img {
    width:46px; height:46px; border-radius:50%; object-fit:cover; flex:0 0 46px;
    filter:grayscale(1) contrast(1.05);
  }
  .wb-strip-t { min-width:0; }
  .wb-strip-n { font-size:11.5px; line-height:1.35; color:var(--wb-ink-fg); font-weight:600; }

  /* Odkazy v heroi skacu na kotvy na tej istej stranke (vyzva, protokol). */
  .wb-btn {
    display:inline-block; background:var(--accent); color:var(--accent-ink);
    font-size:14px; font-weight:800; padding:13px 22px; border-radius:10px;
    text-decoration:none;
  }
  .wb-btn:hover { opacity:.9; }
  .wb-btn2 {
    display:inline-block; color:var(--wb-ink-mut); font-size:14px; font-weight:700;
    padding:13px 6px; margin-left:13px; border-bottom:1px solid var(--wb-ink-line);
    text-decoration:none;
  }
  .wb-btn2:hover { color:var(--wb-ink-fg); border-bottom-color:var(--accent); }

  /* ---- co staviame ---- */
  .wb-crit { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:22px; }
  .wb-crit-c { background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:19px; }
  .wb-crit-c b { display:block; font-size:15.5px; font-weight:800; margin-bottom:6px; }
  .wb-crit-c span { font-size:13.5px; line-height:1.55; color:var(--muted); }

  /* ---- pre koho ---- */
  .wb-two { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
  .wb-col { border-radius:11px; padding:20px; }
  .wb-col-yes { background:var(--hl-round-bg); border:1px solid var(--accent); }
  .wb-col-no { background:var(--surface); border:1px solid var(--border); }
  .wb-col h4 { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; margin-bottom:13px; }
  .wb-col-yes h4 { color:var(--warn); }
  .wb-col-no h4 { color:var(--muted); }
  .wb-col ul { list-style:none; }
  .wb-col li { font-size:13.5px; line-height:1.5; padding:9px 0 9px 22px; position:relative; border-bottom:1px solid var(--border); }
  .wb-col li:last-child { border-bottom:0; }
  .wb-col li::before { position:absolute; left:0; top:9px; font-weight:800; font-size:13px; }
  .wb-col-yes li::before { content:"→"; color:var(--warn); }
  .wb-col-no li::before { content:"×"; color:var(--danger); }
  .wb-col-no li { color:var(--muted); }

  /* ---- co dostanes ---- */
  .wb-get { margin-top:20px; border-top:1px solid var(--border); }
  .wb-get-r { display:grid; grid-template-columns:200px 1fr; gap:24px; padding:17px 0; border-bottom:1px solid var(--border); }
  .wb-get-k { font-size:14.5px; font-weight:800; }
  .wb-get-v { font-size:13.5px; line-height:1.6; color:var(--muted); }

  /* ---- protokol ---- */
  /* Zvisla os. Vodorovny rad osmich uzlov sa zalomi na kazdej rozumnej sirke a
     posledny zostane trciet sam; zhora nadol sa to cita rovnako na mobile aj na
     desktope a vysvetlivka ma miesto vedla kroku, nie v uzkej karte. */
  .wb-steps { list-style:none; margin:24px 0 8px; padding:0 0 0 22px; border-left:2px solid var(--border); }
  .wb-step { display:grid; grid-template-columns:150px 1fr; gap:20px; padding:15px 0; position:relative; }
  .wb-step + .wb-step { border-top:1px solid var(--border); }
  .wb-step::before {
    content:""; position:absolute; left:-29px; top:21px; width:11px; height:11px;
    border-radius:50%; background:var(--bg); border:2px solid var(--border);
  }
  .wb-step-meta { font-size:11px; font-weight:800; color:var(--muted); letter-spacing:.09em; padding-top:2px; }
  .wb-step-t { font-size:15.5px; font-weight:800; line-height:1.3; }
  .wb-step-d { font-size:13.5px; line-height:1.6; color:var(--muted); margin-top:5px; }

  /* Gate = rozhodnutie. Odlisuje sa bodkou a farbou popisu, nie cielym tmavym
     blokom — osem striedavo tmavych kariet robilo zo sekcie sachovnicu. */
  .wb-step-gate::before { background:var(--primary); border-color:var(--primary); }
  .wb-step-gate .wb-step-meta { color:var(--warn); }
  .wb-step-final::before { background:var(--accent); border-color:var(--accent); }
  .wb-step-final .wb-step-meta { color:var(--warn); }
  .wb-step-final .wb-step-main {
    background:var(--hl-round-bg); border:1px solid var(--accent);
    border-radius:9px; padding:13px 15px; margin:-13px 0;
  }

  .wb-rule {
    font-size:13.5px; line-height:1.6; color:var(--muted); margin-top:18px;
    padding-left:15px; border-left:3px solid var(--accent);
  }
  .wb-rule-2 { border-left-color:var(--border); }

  .wb-table-wrap { overflow-x:auto; }
  .wb-ev { width:100%; min-width:480px; border-collapse:collapse; margin-top:20px; }
  .wb-ev th {
    text-align:left; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
    padding:0 10px 8px 0; border-bottom:1px solid var(--border); font-weight:800;
  }
  .wb-ev td { padding:9px 10px 9px 0; border-bottom:1px solid var(--border); font-size:13px; color:var(--muted); vertical-align:top; }
  .wb-ev td:first-child { width:44px; }
  .wb-td-strong { width:195px; font-weight:700; color:var(--text); }
  /* Sila 4 a 5 su v makete zvyraznene riadky — kotva "dokaz, ktory ratame". */
  .wb-ev-r4 td, .wb-ev-r5 td { background:var(--hl-round-bg); }
  .wb-lvl {
    display:inline-flex; align-items:center; justify-content:center;
    width:27px; height:27px; border-radius:8px; font-size:12.5px; font-weight:800;
    background:var(--surface-2); color:var(--muted);
  }
  .wb-lvl-1, .wb-lvl-2 { background:var(--danger-bg); color:var(--danger); }
  .wb-lvl-3 { background:var(--warn-bg); color:var(--warn); }
  .wb-lvl-4, .wb-lvl-5 { background:var(--ok-bg); color:var(--ok); }

  /* ---- podmienky ---- */
  .wb-terms { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px; }
  .wb-term { background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:19px; }
  .wb-term-big { font-size:25px; font-weight:800; letter-spacing:-.015em; line-height:1.15; }
  .wb-term-k { font-size:11.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:5px; }
  .wb-term-d { font-size:13px; line-height:1.55; color:var(--muted); margin-top:10px; }

  /* ---- profily ---- */
  /* Jeden stĺpec, nie dva: celý profil je vidieť rovno (rozbaľovanie Pavol
     zamietol) a dlhý text v polovičnej šírke by mal nečitateľne krátke riadky. */
  .wb-people { display:grid; grid-template-columns:1fr; gap:14px; margin-top:20px; }
  .wb-person { background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:22px 24px; }
  .wb-person-h { display:flex; gap:14px; align-items:center; margin-bottom:14px; }
  .wb-person-h img { width:56px; height:56px; border-radius:50%; object-fit:cover; flex:0 0 56px; filter:grayscale(1) contrast(1.05); }
  .wb-person-n { font-size:16px; font-weight:800; }
  .wb-person-r { font-size:13px; color:var(--muted); margin-top:3px; line-height:1.45; }
  .wb-person-body { max-width:74ch; }
  .wb-person-body p { font-size:13.5px; line-height:1.65; color:var(--muted); white-space:pre-wrap; }
  .wb-person-track { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }

  /* ---- vyzva ---- */
  .wb-sec-cta .wb-label { color:var(--accent); }
  .wb-sec-cta .wb-lead-sm { color:var(--wb-ink-mut); }
  /* Bez <form>: polia su disabled maketa. Farbu textu drzime svetlu aj cez
     -webkit-text-fill-color, inak ju Safari na disabled poliach stmavi. */
  .wb-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; max-width:640px; }
  .wb-fi { display:flex; flex-direction:column; gap:6px; min-width:0; }
  .wb-fi-wide { grid-column:1 / -1; }
  .wb-fi-l { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--wb-ink-mut); }
  .wb-fi input, .wb-fi textarea {
    width:100%; background:var(--wb-ink-field); border:1px solid var(--wb-ink-line);
    border-radius:9px; padding:12px 13px; font-size:13px; font-family:inherit; line-height:1.5;
    color:var(--wb-ink-mut); -webkit-text-fill-color:var(--wb-ink-mut); opacity:1; resize:none;
  }
  .wb-fi input::placeholder, .wb-fi textarea::placeholder { color:var(--wb-ink-mut); opacity:1; }
  .wb-send {
    grid-column:1 / -1; background:var(--accent); color:var(--accent-ink);
    -webkit-text-fill-color:var(--accent-ink); opacity:1;
    border:none; border-radius:9px; padding:13px; font-size:14px; font-weight:800;
    font-family:inherit; text-align:center;
  }
  .wb-foot { font-size:12px; color:var(--wb-ink-mut); margin-top:15px; max-width:56ch; line-height:1.55; }

  /* ---------- web: tmava tema ----------
     Plne tmave bloky sa v tmavej teme nedaju nechat na --primary (je zlty).
     Hero a vyzva sa menia na povrch s akcentovym ramom, gate uzly tiez. */
  [data-theme="dark"] .wb-hero, [data-theme="dark"] .wb-sec-cta {
    --wb-ink-fg: var(--text);
    --wb-ink-mut: var(--muted);
    --wb-ink-line: var(--border);
    --wb-ink-field: var(--bg);
    background:var(--surface-2); border:1px solid var(--accent);
  }
  [data-theme="dark"] .wb-hero .wb-lead { color:var(--muted); }
  /* V tmavej teme je --primary akcentova zlta, tak by bodka gatu splynula
     s finalnou; gate dostane bledu bodku, finale zostava zlte. */
  [data-theme="dark"] .wb-step-gate::before { background:var(--text); border-color:var(--text); }

  @media (max-width: 760px) {
    .wb-sec { padding:26px 20px; }
    .wb-hero { padding:30px 20px 26px; }
    .wb-strip { grid-template-columns:repeat(2,1fr); }
    .wb-crit, .wb-two, .wb-terms, .wb-people, .wb-form { grid-template-columns:1fr; }
    .wb-get-r { grid-template-columns:1fr; gap:6px; }
    /* Mobile: oznacenie kroku ide nad nadpis, nie do vlastneho stlpca. */
    .wb-step { grid-template-columns:1fr; gap:4px; }
    .wb-steps { padding-left:18px; }
    .wb-step::before { left:-25px; }
  }
  @media (max-width: 480px) {
    .wb-strip { grid-template-columns:1fr; }
    .wb-btn, .wb-btn2 { display:block; margin-left:0; text-align:center; }
    .wb-btn2 { margin-top:6px; border-bottom:none; text-decoration:underline; }
  }

  /* ---------- pitch nápadu (/idea/pitch) ----------
     Stavia na wb-* komponentoch tabu Web zámerne: je to ten istý typ dokumentu
     a duplikovať raster kariet, osi a tabuľky by znamenalo dve pravdy o vzhľade.
     Vlastné sú tu len kusy, ktoré Web nemá — pás čísel v heroi, štítky stavu,
     medzinadpis v sekcii, riadky Výzvy a pätička zdrojov. Farby berú existujúce
     tokeny, takže kontrastný test ich pokrýva bez nových dvojíc. */
  .pt-num b {
    display:block; font-size:25px; font-weight:800; letter-spacing:-.02em; line-height:1.1;
    color:var(--wb-ink-fg); font-variant-numeric:tabular-nums;
  }
  .pt-num span { display:block; font-size:12.5px; line-height:1.45; color:var(--wb-ink-mut); margin-top:6px; }

  .pt-h3 {
    font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
    color:var(--muted); margin:26px 0 0;
  }

  .pt-tag {
    display:inline-block; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
    padding:3px 8px; border-radius:7px; margin-bottom:5px; white-space:nowrap;
  }
  .pt-tag-kill { background:var(--danger-bg); color:var(--danger); }
  .pt-tag-open { background:var(--warn-bg); color:var(--warn); }
  .pt-tag-done { background:var(--ok-bg); color:var(--ok); }

  .pt-ask { margin-top:24px; border-top:1px solid var(--wb-ink-line); }
  .pt-ask-r {
    display:grid; grid-template-columns:210px 1fr; gap:24px; padding:16px 0;
    border-bottom:1px solid var(--wb-ink-line);
  }
  .pt-ask-k { font-size:14px; font-weight:800; color:var(--wb-ink-fg); }
  .pt-ask-v { font-size:13.5px; line-height:1.6; color:var(--wb-ink-mut); }
  .pt-kicker {
    margin-top:26px; font-size:clamp(19px,3vw,26px); font-weight:800; letter-spacing:-.02em;
    line-height:1.25; color:var(--wb-ink-fg); max-width:32ch;
  }

  .pt-sources {
    margin-top:26px; padding-top:16px; border-top:1px solid var(--border);
    font-size:12px; line-height:1.7; color:var(--muted); max-width:82ch;
  }
  .pt-sources b { color:var(--text); }

  @media (max-width: 760px) {
    .pt-ask-r { grid-template-columns:1fr; gap:6px; }
  }