/* קלפים בקליק — מעטפת העמוד. כל עיצוב הקלפים עצמם מגיע מ-css/style.css של נחלות (מועתק בבנייה). */
body.kl { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at top, #3a240b, #140c04 70%); color: var(--ink, #f3e6c4); font-family: Assistant, sans-serif; }
.kl-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px;
  background: rgba(20, 12, 4, .92); border-bottom: 1px solid var(--bronze, #8a6a3a); backdrop-filter: blur(6px); }
.kl-brand { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.kl-brand img { width: 38px; height: 38px; object-fit: contain; }
.kl-brand b { font: 900 1.25rem 'Frank Ruhl Libre', serif; color: var(--gold, #f2c46b); }
.kl-brand small { color: var(--muted, #b9a77f); font-size: .78rem; }
.kl-who { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.kl-who select { background: rgba(0, 0, 0, .35); color: inherit; border: 1px solid var(--bronze, #8a6a3a); border-radius: 8px; padding: 4px 6px; font: inherit; }
.btn.sm { padding: 4px 10px; font-size: .8rem; }
.kl-nav { display: flex; gap: 6px; padding: 10px 16px 0; overflow-x: auto; max-width: 980px; margin: 0 auto; }
.kl-nav button { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bronze, #8a6a3a); background: rgba(0, 0, 0, .3); color: inherit; font: 700 .9rem Assistant, sans-serif; cursor: pointer; }
.kl-nav button.on { background: linear-gradient(135deg, #b8862b, #f0c85a); color: #2b1c05; border-color: #f0c85a; }
.kl-main { max-width: 980px; margin: 0 auto; padding: 12px 16px 40px; }
.kl-page { background: rgba(28, 18, 6, .7); border: 1px solid rgba(138, 106, 58, .5); border-radius: 16px; padding: 14px; }
.kl-page h2 { font: 900 1.5rem 'Frank Ruhl Libre', serif; color: var(--gold, #f2c46b); margin: 0 0 6px; }
.kl-page > div > .cd-tabs, .kl-page > .cd-tabs { display: none; }    /* הלשוניות של המודול — כאן בניווט העליון */
.kl-load { text-align: center; color: var(--muted, #b9a77f); padding: 40px 0; }
.kl-hero { text-align: center; padding: 30px 10px; }
.kl-hero img { width: 140px; filter: drop-shadow(0 10px 24px rgba(240, 190, 90, .45)); }
.kl-hero h1 { font: 900 2rem 'Frank Ruhl Libre', serif; color: var(--gold, #f2c46b); margin: 10px 0; }
.kl-hero p { max-width: 560px; margin: 8px auto; }
.kl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 10px 0; }
.kl-box { border: 1px solid var(--bronze, #8a6a3a); border-radius: 12px; padding: 10px; background: rgba(0, 0, 0, .25); }
.kl-box h3 { margin: 0 0 6px; }
.kl-row { display: flex; gap: 6px; }
.kl-row input, #tr-q { flex: 1; min-width: 0; padding: 8px; border-radius: 10px; border: 1px solid var(--bronze, #8a6a3a); background: rgba(0, 0, 0, .3); color: inherit; font: inherit; }
#tr-q { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.kl-list { display: grid; gap: 6px; }
.kl-tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(138, 106, 58, .4); }
.kl-tr.done { border-color: #4f8a3a; } .kl-tr.cancelled { opacity: .55; }
.kl-tr code, .kl-code { font: 800 1rem ui-monospace, monospace; letter-spacing: .12em; color: var(--gold, #f2c46b); }
.kl-st { color: var(--muted, #b9a77f); font-size: .85rem; }
.kl-pick { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 12px 0; }
.kl-pick > b { font-size: 2rem; color: var(--gold, #f2c46b); }
.kl-tc { display: grid; justify-items: center; gap: 4px; }
.kl-tc small { color: var(--muted, #b9a77f); font-weight: 700; }
.cd-tile.sel { outline: 3px solid #f0c85a; }
.kl-foot { text-align: center; color: var(--muted, #b9a77f); font-size: .8rem; padding: 20px 16px; }
.kl-foot a { color: var(--gold, #f2c46b); }
@media (max-width: 520px) { .kl-brand small { display: none; } .kl-main { padding: 10px 16px 30px; } }