/* NEXORA — תוספות והרחבות. Ported 1:1 from the approved sketch (Nexora תוספות - סקיצה).
   Tokenized to SYSTEM color tokens so the page follows the user's chosen theme (--primary).
   Zero hardcoded brand hex (category/content colors are allowed content colors). Zero emojis (SVG only). RTL + dark-safe. */
#v-extensions{
  --brand:var(--primary,#0d9488); --accent:var(--secondary,#06b6d4);
  --surface:var(--card-bg,#fff); --raised:var(--bg-secondary,#f4f6f8);
  --border:color-mix(in srgb,var(--text-light,#5a6b74) 32%,transparent);
  --muted:var(--text-light,#5a6b74); --ok:var(--success,#1f9d63);
  --ease:cubic-bezier(.22,1,.36,1); --nxr:14px;
  --nxshadow:0 1px 2px rgba(14,19,22,.04),0 10px 28px rgba(14,19,22,.06);
  font-weight:400; font-family:"Heebo","Inter",system-ui,sans-serif;
}

/* FIX: nxxIc() outputs a class-less <svg> with NO width/height. Without a default, icons inside the
   connection-settings side panel fall back to the SVG intrinsic size (~300px) and wreck the layout.
   This is the lowest-specificity default (1 id, 1 element) — every class-based rule below overrides it
   where a larger icon is intended, so only the otherwise-unsized inline icons are affected. */
#v-extensions svg{width:15px;height:15px;flex:none;vertical-align:middle}

/* page title — match sketch bar1 (thin outline icon, no gradient box) */
#v-extensions .page-header{margin-bottom:2px}
#v-extensions .page-title{display:flex;align-items:center;gap:10px}
#v-extensions .page-title-icon{width:auto;height:auto;background:none!important;box-shadow:none!important;border-radius:0;color:var(--brand);display:grid;place-items:center;flex:none;font-size:inherit}
#v-extensions .page-title-icon svg{width:26px;height:26px;stroke:var(--brand);stroke-width:1.8}
#v-extensions .page-title h1{font-size:1.5rem;font-weight:800;line-height:1.15;margin:0}
#v-extensions .nxx-sub{font-size:.84rem;color:var(--muted);font-weight:500;margin:3px 0 0}

/* hub banner */
#v-extensions .nxx-hub{position:relative;margin:4px 0 6px;border-radius:18px;padding:18px 24px;color:#fff;overflow:hidden;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
 background:radial-gradient(120% 160% at 100% 0%,color-mix(in srgb,var(--accent) 85%,#fff) 0%,var(--brand) 38%,color-mix(in srgb,var(--brand) 30%,#0E1316) 100%)}
#v-extensions .nxx-hub h2{margin:0;font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
#v-extensions .nxx-hub p{margin:3px 0 0;font-size:.84rem;font-weight:300;opacity:.9;max-width:460px;line-height:1.5}
#v-extensions .nxx-hub .stats{margin-inline-start:auto;display:flex;gap:10px;position:relative;z-index:1}
#v-extensions .nxx-hub .st{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);border-radius:13px;padding:9px 16px;text-align:center;min-width:84px}
#v-extensions .nxx-hub .st b{display:block;font-size:1.4rem;font-weight:600;line-height:1.1}
#v-extensions .nxx-hub .st span{font-size:.72rem;font-weight:400;opacity:.85}
#v-extensions .nxx-hub .orbit{position:absolute;inset-inline-start:-30px;top:-40px;width:260px;height:260px;opacity:.2;pointer-events:none}
#v-extensions .nxx-hub .orbit g{transform-origin:130px 130px;animation:nxxspin 40s linear infinite}
#v-extensions .nxx-hub .orbit g.r{animation-duration:26s;animation-direction:reverse}
#v-extensions .nxx-hub>div{position:relative;z-index:1}
@keyframes nxxspin{to{transform:rotate(360deg)}}

/* search */
#v-extensions .nxx-search{position:relative;margin:4px 0 2px;max-width:420px}
#v-extensions .nxx-search svg{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted);pointer-events:none}
#v-extensions .nxx-search input{width:100%;padding:11px 40px 11px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:.88rem;font-family:inherit}
#v-extensions .nxx-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}

/* category tabs */
#v-extensions .nxx-cats{display:flex;gap:4px;padding:6px 0 0;overflow-x:auto;border-bottom:1px solid var(--border);margin:8px 0 0;position:relative}
#v-extensions .nxx-cats button{position:relative;display:inline-flex;align-items:center;gap:7px;padding:11px 15px;font-size:.86rem;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .2s;background:none;border:none;cursor:pointer;font-family:inherit}
#v-extensions .nxx-cats button svg{width:16px;height:16px}
#v-extensions .nxx-cats button .n{font-size:.68rem;font-weight:600;background:var(--raised);border-radius:20px;padding:1px 7px;color:var(--muted)}
#v-extensions .nxx-cats button:hover{color:var(--text)}
#v-extensions .nxx-cats button.on{color:var(--brand);font-weight:600}
#v-extensions .nxx-cats button.on .n{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}
#v-extensions .nxx-cats i.ink{position:absolute;bottom:-1px;height:2.5px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--brand));transition:inset-inline-start .35s var(--ease),width .35s var(--ease)}

/* split layout */
#v-extensions .nxx-split{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:16px;padding:16px 0 30px;align-items:start}
#v-extensions .nxx-split.noside{grid-template-columns:minmax(0,1fr)}
@media(max-width:1000px){#v-extensions .nxx-split{grid-template-columns:1fr}}
#v-extensions .exts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}

/* card */
#v-extensions .ext{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--nxshadow);padding:16px 16px 14px;display:flex;flex-direction:column;gap:11px;
 transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;cursor:pointer;overflow:hidden}
#v-extensions .ext::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--brand));transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
#v-extensions .ext.act::before{transform:scaleX(1)}
#v-extensions .ext:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(14,19,22,.1)}
#v-extensions .ext.sel{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent),var(--nxshadow)}
#v-extensions .ext.locked{opacity:.7}
#v-extensions .ext .top{display:flex;align-items:flex-start;gap:12px}
#v-extensions .ext .xi{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--c,var(--brand)) 12%,transparent);color:var(--c,var(--brand));transition:.3s var(--ease)}
#v-extensions .ext .xi svg{width:22px;height:22px}
#v-extensions .ext:hover .xi{transform:rotate(-6deg) scale(1.06)}
#v-extensions .ext:not(.act) .xi{filter:grayscale(.85);opacity:.7}
#v-extensions .ext h4{margin:0;font-size:.98rem;font-weight:600;color:var(--text)}
#v-extensions .ext p{margin:0;font-size:.82rem;color:var(--muted);font-weight:400;line-height:1.55;min-height:2.6em}
#v-extensions .ext .catpill{display:inline-block;margin-top:5px;font-size:.68rem;font-weight:700;padding:2px 9px;border-radius:20px;background:color-mix(in srgb,var(--c,var(--brand)) 12%,transparent);color:var(--c,var(--brand))}
#v-extensions .ext .plan{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:600;color:#7c5cd6;background:color-mix(in srgb,#7c5cd6 12%,transparent);border-radius:20px;padding:2px 8px;margin-inline-start:6px}
#v-extensions .ext .plan svg{width:11px;height:11px}
#v-extensions .ext .tgl{margin-inline-start:auto;padding-top:2px}
#v-extensions .ext .feats{display:flex;flex-wrap:wrap;gap:5px}
#v-extensions .ext .feats span{font-size:.7rem;font-weight:500;color:var(--muted);background:var(--raised);border-radius:20px;padding:2px 9px}
#v-extensions .ext .ft{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:11px;border-top:1px dashed var(--border)}
#v-extensions .ext .stt{font-size:.74rem;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
#v-extensions .ext .stt i{width:7px;height:7px;border-radius:50%;background:var(--muted);transition:.3s;flex:none}
#v-extensions .ext.act .stt i{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 20%,transparent)}
#v-extensions .ext .asgn{color:var(--muted)}
#v-extensions .ext .ro{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--muted);font-weight:500}
#v-extensions .ext .ro svg{width:13px;height:13px}
#v-extensions .ext .cfgbtn{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent);border:none;border-radius:9px;padding:6px 11px;cursor:pointer;font-family:inherit}
#v-extensions .ext .cfgbtn svg{width:14px;height:14px}
#v-extensions .ext .cfgbtn:hover{background:color-mix(in srgb,var(--brand) 16%,transparent)}
#v-extensions .ext .upg{background:color-mix(in srgb,var(--danger,#dd4b52) 12%,transparent);color:var(--danger,#dd4b52)}
#v-extensions .ext .lockbadge{position:absolute;top:10px;inset-inline-start:10px;background:var(--danger,#dd4b52);color:#fff;font-size:.62rem;font-weight:700;padding:3px 9px;border-radius:12px;z-index:2;display:inline-flex;align-items:center;gap:4px}
#v-extensions .ext .lockbadge svg{width:11px;height:11px}

/* toggle (sketch sw2) */
#v-extensions .sw2{position:relative;display:inline-block;width:40px;height:23px;flex:none;cursor:pointer}
#v-extensions .sw2 input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
#v-extensions .sw2 i{position:absolute;inset:0;background:var(--border);border-radius:20px;transition:.25s var(--ease)}
#v-extensions .sw2 i::before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;top:3px;inset-inline-start:3px;transition:.25s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.2)}
#v-extensions .sw2 input:checked+i{background:var(--brand)}
#v-extensions .sw2 input:checked+i::before{inset-inline-start:20px}

/* empty state */
#v-extensions .nxx-empty{grid-column:1/-1;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:40px 20px;text-align:center;color:var(--muted)}
#v-extensions .nxx-empty svg{width:34px;height:34px;color:var(--brand);opacity:.6;margin-bottom:8px}
#v-extensions .nxx-empty b{display:block;font-size:1rem;color:var(--text);margin-bottom:4px}

/* ===== SIDE PANEL ===== */
#v-extensions .side{position:sticky;top:12px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--nxshadow);overflow:hidden;animation:nxxrise .35s var(--ease) both}
@keyframes nxxrise{from{opacity:0;transform:translateY(10px)}}
#v-extensions .side .sh{display:flex;align-items:center;gap:12px;padding:16px 18px;color:#fff;background:linear-gradient(120deg,var(--c,var(--brand)),color-mix(in srgb,var(--c,var(--brand)) 55%,#000))}
#v-extensions .side .sh .pic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
#v-extensions .side .sh .pic svg{width:21px;height:21px}
#v-extensions .side .sh h3{margin:0;font-size:1.02rem;font-weight:600}
#v-extensions .side .sh small{opacity:.85;font-size:.76rem;font-weight:300}
#v-extensions .side .sh .cx{margin-inline-start:auto;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.18);display:grid;place-items:center;color:#fff;border:none;cursor:pointer;flex:none}
#v-extensions .side .sh .cx svg{width:15px;height:15px}
/* side tabs */
#v-extensions .extension-settings-tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--border);overflow-x:auto;background:var(--surface)}
#v-extensions .extension-settings-tab{display:inline-flex;align-items:center;gap:6px;padding:11px 10px;font-size:.8rem;font-weight:500;color:var(--muted);border:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;background:none;cursor:pointer;font-family:inherit}
#v-extensions .extension-settings-tab svg{width:14px;height:14px}
#v-extensions .extension-settings-tab.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
#v-extensions .side .sbody{max-height:calc(100vh - 230px);overflow-y:auto}
#v-extensions .ext-tab-content{padding:4px 0}
#v-extensions .side .sfoot{display:flex;gap:9px;padding:14px 18px;background:var(--raised)}
#v-extensions .side .sfoot .btn{flex:1;justify-content:center}

/* side sections (sketch .sec) */
#v-extensions .settings-section{padding:15px 18px;border-bottom:1px solid var(--border)}
#v-extensions .settings-section:last-child{border-bottom:none}
#v-extensions .settings-section h4{margin:0 0 10px;font-size:.78rem;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:7px;letter-spacing:.02em}
#v-extensions .settings-section h4 svg{width:14px;height:14px;color:var(--brand)}
#v-extensions .settings-section .sechead{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:.78rem;font-weight:600;color:var(--muted)}
#v-extensions .settings-section .sechead svg{width:14px;height:14px;color:var(--brand)}
#v-extensions .nxx-swrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-size:.86rem;color:var(--text)}
#v-extensions .nxx-swrow small{display:block;font-size:.72rem;color:var(--muted);font-weight:400}
#v-extensions .nxx-pill{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:20px}
#v-extensions .nxx-pill.on{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
#v-extensions .nxx-pill.off{background:var(--raised);color:var(--muted)}
#v-extensions .nxx-tags{display:flex;flex-wrap:wrap;gap:6px}
#v-extensions .nxx-tags span{font-size:.76rem;font-weight:500;background:color-mix(in srgb,var(--brand) 9%,transparent);color:var(--brand);border-radius:20px;padding:4px 11px}
#v-extensions .nxx-note{display:flex;gap:8px;align-items:flex-start;font-size:.78rem;color:var(--muted);background:var(--raised);border-radius:11px;padding:10px 12px;line-height:1.5;margin-top:10px}
#v-extensions .nxx-note svg{width:15px;height:15px;color:var(--brand);flex:none;margin-top:2px}

/* branch assignment tree (sketch .asg) */
#v-extensions .extension-branch-selector{display:grid;gap:7px}
#v-extensions .extension-branch-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:11px;background:var(--surface);transition:.2s;cursor:pointer}
#v-extensions .extension-branch-item.selected{border-color:color-mix(in srgb,var(--brand) 45%,var(--border));background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
#v-extensions .extension-branch-item .nm{font-weight:500;font-size:.86rem;color:var(--text)}
#v-extensions .extension-branch-item .ct{font-size:.72rem;color:var(--muted)}
#v-extensions .extension-branch-checkbox{width:24px;height:24px;border-radius:8px;border:1.5px solid var(--border);display:grid;place-items:center;color:#fff;flex:none;transition:.2s;font-size:0}
#v-extensions .extension-branch-item.selected .extension-branch-checkbox{background:var(--brand);border-color:var(--brand)}
#v-extensions .extension-branch-checkbox svg{width:14px;height:14px}
#v-extensions .extension-branch-item .meta{flex:1;min-width:0}

/* permissions matrix (sketch .perm) */
#v-extensions .nxx-perm{width:100%;border-collapse:collapse;font-size:.8rem}
#v-extensions .nxx-perm th{font-weight:500;color:var(--muted);font-size:.72rem;padding:0 0 8px;text-align:center}
#v-extensions .nxx-perm th:first-child{text-align:start}
#v-extensions .nxx-perm td{padding:7px 0;border-top:1px solid var(--border);text-align:center}
#v-extensions .nxx-perm td:first-child{text-align:start;font-weight:500;color:var(--text)}
#v-extensions .nxx-ck{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;border:1.5px solid var(--border);color:transparent;transition:.2s var(--ease);background:none;cursor:pointer}
#v-extensions .nxx-ck svg{width:14px;height:14px}
#v-extensions .nxx-ck.on{background:var(--brand);border-color:var(--brand);color:#fff}
#v-extensions .nxx-ck[disabled]{cursor:default;opacity:.5}
#v-extensions .form-group{margin-bottom:12px}
#v-extensions .form-group .form-label{display:block;font-size:.78rem;font-weight:600;color:var(--text);margin-bottom:5px}
#v-extensions .form-group .form-input,#v-extensions .form-group select.form-input{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:.84rem;font-family:inherit}

/* reduced motion */
@media(prefers-reduced-motion:reduce){#v-extensions *{animation:none!important}}