/* STYKI: Kompas wartości, wersja interaktywna */
.kx{position:relative;margin:28px 0 36px;padding:30px 34px 28px;border-radius:30px;color:#f4eef0;isolation:isolate;overflow:hidden;
background:radial-gradient(720px 420px at 0% 0%,rgba(132,38,62,.58),transparent 70%),radial-gradient(560px 420px at 100% 110%,rgba(225,180,92,.11),transparent 70%),linear-gradient(160deg,#3a2a31,#2f2a2f 52%,#272a2f);box-shadow:0 30px 70px rgba(39,42,47,.16)}
.kx-title{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 6px}
.kx-title h2{color:#fff;margin:0;font-size:clamp(26px,3vw,36px)}
.kx-title span{font-size:12px;color:#cdbfc6}
.kx-dots{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:10px 0 18px;padding:0;counter-reset:k}
.kx-dots li{counter-increment:k;font-size:12px;font-weight:600;color:#b9abb2;padding:6px 12px 6px 8px;border-radius:99px;border:1px solid rgba(255,255,255,.12)}
.kx-dots li::before{content:counter(k);display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:50%;background:rgba(255,255,255,.1);font-size:11px}
.kx-dots li.now{color:#2f2a2f;background:#f8f1f3;border-color:transparent}
.kx-dots li.now::before{background:#6e1a3a;color:#fff}
.kx-dots li.done{color:#f0d29a;border-color:rgba(225,180,92,.4)}
.kx-dots li.done::before{content:"✓";background:rgba(225,180,92,.25)}
.kx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:34px;align-items:start}
.kx-wheel{position:sticky;top:90px}
.kx-wheel svg{display:block;width:100%;height:auto;max-width:460px;margin:0 auto;overflow:visible}
.kx-ring{fill:none;stroke:rgba(255,255,255,.08)}
.kx-bg{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.12);transition:fill .3s,stroke .3s}
.kx-fill{transform-origin:170px 170px;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.4,.5,1);opacity:.75}
.kx-lab{font:600 12px system-ui,-apple-system,sans-serif;fill:#d9ccd2;transition:fill .3s,opacity .3s}
.kx-hub{fill:#f8f1f3}
.kx-sec{cursor:pointer;outline:none}
.kx-final .kx-sec,.kx-sec.dim{cursor:default}
.kx-sec:hover .kx-bg,.kx-sec:focus-visible .kx-bg{fill:rgba(255,255,255,.08)}
.kx-sec:focus-visible .kx-bg{stroke:#e1b45c;stroke-width:2}
.kx-sec.on .kx-bg{fill:rgba(255,255,255,.09);stroke:rgba(255,255,255,.35)}
.kx-sec.on .kx-lab{fill:#fff;font-weight:800}
.kx-sec.dim .kx-lab{opacity:.45}
.kx-sec.dim .kx-bg{fill:rgba(255,255,255,.015)}
.c1{--c:#c4566e}.c2{--c:#e1b45c}.c3{--c:#9db5a3}.c4{--c:#8fb3c9}.c5{--c:#8575a3}.c6{--c:#e09a6a}.c7{--c:#7c9987}.c8{--c:#d98ca1}
.kx-fill{fill:var(--c)}
.kx-panel h3{color:#fff;margin:0 0 8px;font-size:clamp(22px,2.4vw,28px)}
.kx-lead{color:#e1d6db;margin:0 0 18px;line-height:1.55}
.kx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;align-items:center}
.kx-chips.small{gap:6px;margin:8px 0 0}
.kx-chip{font:inherit;font-size:14px;font-weight:600;padding:9px 15px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#f1e7eb;cursor:pointer;transition:transform .15s,background .2s,border-color .2s,color .2s}
.kx-chip:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.45)}
.kx-chip.on{background:#f8f1f3;color:#5a1830;border-color:transparent;transform:scale(1.03)}
.kx-chip[class*=" c"]{border-left:6px solid var(--c)}
.kx-chip[class*=" c"].on{background:var(--c);color:#221d21}
.kx-chips.small .kx-chip{font-size:12px;padding:6px 11px}
.kx-chip.sug{font-weight:500}
.kx-lbl{font-size:12px;color:#bfb2b8;margin-right:4px;min-width:42px}
.kx-count,.kx-hint{font-size:13px;color:#cdbfc6;margin:4px 0 0}
.kx-area{padding:16px 18px;margin:0 0 12px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.kx-ah{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:#fff;font-size:16px}
.kx-ah i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.kx-in{width:100%;font:inherit;font-size:15px;padding:11px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:#fbf8f9;color:#222a3b;margin-top:4px}
.kx-in::placeholder{color:#8a8f99}
.kx-range{display:flex;align-items:center;gap:10px}
.kx-range input{flex:1;accent-color:var(--c);height:28px}
.kx-end{font-size:12px;color:#bfb2b8}
.kx-val{min-width:52px;text-align:right;font-weight:800;font-size:20px;color:var(--c)}
.kx-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.kx-btn{font:inherit;font-weight:700;padding:12px 22px;border-radius:99px;border:0;background:#f8f1f3;color:#6e1a3a;cursor:pointer;transition:background .2s,transform .15s}
.kx-btn:hover{background:#fff;transform:translateY(-1px)}
.kx-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.kx-btn.ghost{background:transparent;color:#f1e7eb;border:1px solid rgba(255,255,255,.25)}
.kx-res p{margin:4px 0;color:#efe6ea}
.kx-res b{color:#f0d29a}
.kx-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin:6px 0 8px}
.kx-bar span{display:block;height:100%;background:var(--c);border-radius:99px}
.kx-note{position:absolute;left:50%;bottom:18px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#f8f1f3;color:#5a1830;font-weight:600;font-size:14px;padding:10px 16px;border-radius:12px;transition:opacity .3s,transform .3s;margin:0}
.kx-note.show{opacity:1;transform:translate(-50%,0)}
.kx-priv{font-size:12px;color:#bfb2b8;margin:16px 0 0}
@media (max-width:860px){.kx{padding:24px 18px}.kx-grid{grid-template-columns:minmax(0,1fr);gap:16px}.kx-wheel{position:relative;top:0}.kx-wheel svg{max-width:340px}}
@media (prefers-reduced-motion:reduce){.kx-fill,.kx-chip,.kx-btn{transition:none}}
@media print{
 body *{visibility:hidden!important}
 .kx,.kx *{visibility:visible!important}
 .kx{position:absolute;left:0;top:0;width:100%;background:#fff!important;color:#222!important;box-shadow:none;padding:0}
 .kx-dots,.kx-nav,.kx-note,.kx-lead,.kx-priv,.kx-title{display:none!important}
 .kx .kx-sec .kx-lab{fill:#333!important;opacity:1!important}
 .kx .kx-sec.on .kx-lab{fill:#000!important}
 .kx-panel h3,.kx-ah,.kx-res p,.kx-title h2{color:#222!important}.kx-res b{color:#6e1a3a!important}
 .kx-area{border:1px solid #ddd;background:#fff}
 .kx-lab{fill:#333}.kx-bg{fill:#f6f3f4;stroke:#ccc}.kx-ring{stroke:#e6e6e6}.kx-hub{fill:#333}
 .kx-bar{background:#eee;-webkit-print-color-adjust:exact;print-color-adjust:exact}.kx-fill{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}