/* "הסקילים שלי" room (4/11/2026): the skills tree, the brain on top and the room/tab skills hanging under it.
   .sk-node = the cards of the extra skills under the tree; .sk-h* = the hologram tree (5/11/2026). */
.sk-node{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:16px;text-decoration:none;color:var(--ink);
  background:color-mix(in srgb,var(--c) 10%,rgba(255,255,255,.03));border:1px solid color-mix(in srgb,var(--c) 38%,transparent);
  transition:background .2s,border-color .2s,transform .2s;min-width:0}
a.sk-node:hover,a.sk-node:focus-visible{background:color-mix(in srgb,var(--c) 20%,rgba(255,255,255,.04));border-color:color-mix(in srgb,var(--c) 70%,transparent)}
a.sk-node:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sk-node b{font-size:15px;line-height:1.3}
.sk-room{font-size:12px;color:color-mix(in srgb,var(--c) 75%,#fff);font-weight:600;letter-spacing:.01em}
.sk-what{font-size:12.5px;color:var(--muted);line-height:1.45}
.sk-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sk-meta>span{font-size:11.5px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--edge);color:var(--muted);white-space:nowrap}
.sk-extra h2 small{color:var(--muted);font-weight:500;font-size:13px}
.sk-xlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:10px}
.sk-x{--c:#94a3b8;height:100%;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){.sk-node{transition:none}}
/* ----- the tree as a hologram (5/11/2026), same language as the brain hologram in #growth/learn ----- */
.sk-holo-wrap{padding:8px;overflow:hidden;background:radial-gradient(90% 40% at 50% 0%,rgba(139,92,246,.2),rgba(34,211,238,.06) 50%,transparent 75%),rgba(255,255,255,.03)}
.sk-holo{position:relative;min-height:420px;isolation:isolate}
.sk-h-svg,.sk-h-cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.sk-h-svg{z-index:0;transition:opacity .6s}
.sk-h-svg path{fill:none;stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round;opacity:.7}
.sk-h-svg circle{opacity:.75;filter:drop-shadow(0 0 6px currentColor)}
.sk-holo.on .sk-h-svg{opacity:0}
.sk-h-cv{z-index:1}
.sk-h-glow{position:absolute;width:240px;height:190px;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(167,139,250,.5),rgba(34,211,238,.16) 60%,transparent);filter:blur(18px);opacity:.55}
.sk-h-list{list-style:none;margin:0;padding:0}
.sk-h{position:absolute;z-index:2;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:14px;color:var(--ink);text-decoration:none;text-align:center;align-items:center;
  translate:-50% 26px;background:rgba(10,8,24,.55);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 18px -6px color-mix(in srgb,var(--c) 70%,transparent),inset 0 0 12px -6px color-mix(in srgb,var(--c) 60%,transparent);transition:background .2s,border-color .2s,box-shadow .2s}
.sk-h b{font-size:14.5px;line-height:1.3}
a.sk-h:hover,a.sk-h:focus-visible{background:color-mix(in srgb,var(--c) 22%,rgba(10,8,24,.6));border-color:color-mix(in srgb,var(--c) 85%,transparent);box-shadow:0 0 26px -4px color-mix(in srgb,var(--c) 85%,transparent)}
a.sk-h:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sk-h-grp{background:rgba(10,8,24,.35);border-style:dashed;box-shadow:none;padding:6px 10px;translate:-50% 18px}
.sk-h-grp b{font-size:13px;color:var(--muted)}
.sk-h-root{translate:-50% 70px;width:min(300px,86%);padding:10px 14px;border-color:rgba(167,139,250,.6)}
.sk-h-root b{font-size:18px}
.sk-h .sk-meta{justify-content:center;margin-top:3px;flex-wrap:nowrap;gap:4px}.sk-h .sk-meta>span{padding:2px 6px;font-size:11px}
.sk-holo.phone .sk-h:not(.sk-h-root){translate:0 -50%;text-align:start;align-items:flex-start}
.sk-holo.phone .sk-h-root{translate:-50% 64px}
.sk-holo.phone .sk-h .sk-meta{justify-content:flex-start}
@media (prefers-reduced-motion:reduce){.sk-h{transition:none}}
/* ----- AI subscriptions and payments (13/11/2026), the panel at the bottom of the room ----- */
.sk-c-tot{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.sk-c-tot>div{flex:1 1 180px;display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:18px;
  background:color-mix(in srgb,var(--c) 14%,rgba(255,255,255,.03));border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.sk-c-tot b{font-size:30px;line-height:1.1}
.sk-c-tot small,.sk-c-lbl{font-size:12.5px;color:var(--muted)}
.sk-c-tot .sk-c-plan{--c:#fbbf24}
.sk-c-list{display:flex;flex-direction:column;gap:8px}
.sk-cost{--k:#94a3b8;display:flex;gap:12px;justify-content:space-between;align-items:flex-start;padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.035);border:1px solid var(--edge);border-inline-start:3px solid var(--k)}
.sk-cost.paid{--k:#34d399}.sk-cost.plan{--k:#fbbf24}.sk-cost.unk{--k:#f472b6}
.sk-c-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.sk-c-main b{font-size:15px}
.sk-c-note{font-size:12px;color:var(--muted);line-height:1.45}
.sk-c-check{font-size:12px;color:#fbbf24;line-height:1.45}
.sk-c-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;text-align:end}
.sk-c-price{font-weight:700;white-space:nowrap}
.sk-c-price small{font-weight:500;color:var(--muted)}
.sk-c-st{font-size:11.5px;padding:2px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--k) 55%,transparent);color:color-mix(in srgb,var(--k) 80%,#fff);white-space:nowrap}
.sk-c-foot{margin-top:10px}
@media (max-width:480px){.sk-cost{flex-direction:column}.sk-c-side{flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between}}