:root{
  /* layout */
  --skp-z: 9999;
  --skp-popover-width: 560px;
  --skp-popover-max-h: 420px;
  --skp-popover-padding: 10px;
  --skp-popover-offset: 6px;
  --skp-list-indent: 12px;

  /* type */
  --skp-font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --skp-font-size: 14px;
  --skp-line-height: 1.4;

  /* radii & borders */
  --skp-radius-popover: 0px;
  --skp-radius-node: 10px;
  --skp-radius-item: 8px;
  --skp-border-width: 1px;
  --skp-border-color: #ccc;            /* from site: --border-light */

  /* colors (mapped to your brand palette) */
  --skp-color-text: #333;              /* --text-main */
  --skp-color-muted: #555;             /* --text-muted */
  --skp-color-item: #2c3e50;           /* --color-primary */

  --skp-color-popover: #ffffff;        /* --bg-light */
  --skp-color-popover-grad1: rgba(0,0,0,.02);
  --skp-color-popover-grad2: rgba(0,0,0,0);

  --skp-color-hover: #fef9f6;          /* --bg-accent */
  --skp-color-ring: rgba(230,126,34,.28);  /* #e67e22 @ 28% */

  --skp-color-accent: #e67e22;         /* --color-secondary */
  --skp-color-accent-weak: #d35400;    /* --color-secondary-dark */

  /* icons & badges */
  --skp-icon-color: #2c3e50;           /* primary navy */
  --skp-cat-icon-color: #e67e22;       /* orange accent */
  --skp-count-fg: #fff;
  --skp-count-bg1: #e67e22;
  --skp-count-bg2: #d35400;

  /* effects */
  --skp-shadow-popover:
    0 10px 24px rgba(44,62,80,.12),
    0 2px 6px rgba(44,62,80,.06),
    inset 0 1px 0 rgba(255,255,255,.6);
  --skp-highlight-bg: rgba(230,126,34,.16);

  /* timing */
  --skp-t-fast: .12s;
  --skp-t: .15s;
}

/* === SkillPicker (scoped) ========================================== */
.skillpicker-popover{
    position:absolute;
    z-index:var(--skp-z);
    display:none;
    width:var(--skp-popover-width);
    max-height:var(--skp-popover-max-h);
    overflow:auto;
    background: linear-gradient(180deg, var(--skp-color-popover-grad1), var(--skp-color-popover-grad2)), var(--skp-color-popover);
    border:var(--skp-border-width) solid var(--skp-border-color);
    border-radius:var(--skp-radius-popover);
    padding:var(--skp-popover-padding);
    box-shadow:var(--skp-shadow-popover);
    color:var(--skp-color-text);
    font: var(--skp-font-size)/var(--skp-line-height) var(--skp-font-family);
}
.skillpicker-popover ul{
    list-style:none;
    padding-left:var(--skp-list-indent);
    margin:4px 0;
}

/* nodes */
.skillpicker-node{
  position:relative;
  margin:2px 0;
  border-radius:var(--skp-radius-node);
}
.skillpicker-nodeHeader{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px;
  border-radius:var(--skp-radius-node);
  cursor:pointer; user-select:none;
  transition: background var(--skp-t), border-color var(--skp-t), box-shadow var(--skp-t);
  border:var(--skp-border-width) solid transparent;
}
.skillpicker-nodeHeader:hover{
  background:var(--skp-color-hover);
  border-color:var(--skp-border-color);
  box-shadow:0 0 0 4px var(--skp-color-ring);
}

.skillpicker-chev{
    width:1.1em;
    text-align:center;
    opacity:.85;
}

.skillpicker-node.skillpicker-expanded .skillpicker-chev i{
  transform: rotate(90deg);
  transition: transform var(--skp-t);
}
.skillpicker-catIcon{ width:1.3em; text-align:center; color:var(--skp-cat-icon-color); opacity:.95; }
.skillpicker-catName{ font-weight:650; letter-spacing:.2px; }
.skillpicker-count{
  margin-left:auto; font-size:12px; color:var(--skp-count-fg);
  background: linear-gradient(180deg, var(--skp-count-bg1), var(--skp-count-bg2));
  padding:2px 8px; border-radius:999px; box-shadow:0 2px 10px rgba(34,211,238,.35);
}

/* items */
.skillpicker-items li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 6px 5px 26px;
  border-radius:var(--skp-radius-item);
  cursor:pointer;
  color:var(--skp-color-item);
}
.skillpicker-items li:hover{ background: rgba(255,255,255,.03); }
.skillpicker-itemIcon{ width:1.1em; text-align:center; color:var(--skp-icon-color); }

/* helpers */
.skillpicker-hidden{ display:none; }
.skillpicker-highlight{
  background: var(--skp-highlight-bg);
  border-radius:4px; padding:0 2px;
}

/* optional: scrollbar for popover */
.skillpicker-popover::-webkit-scrollbar{ width:10px; }
.skillpicker-popover::-webkit-scrollbar-thumb{ background:var(--skp-color-accent); border-radius:8px; }
.skillpicker-popover::-webkit-scrollbar-track{ background:transparent; }

/* === Input Field (scoped) ========================================== */
.skillpicker-field{
  display:flex;
  align-items:
  center; gap:10px;
  background: rgba(255,255,255,.03);
  border:var(--skp-border-width) solid var(--skp-border-color);
  border-radius:6px;
  padding-left:6px;
  color:var(--skp-color-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  width: 100%;
  
}
.skillpicker-field > .fa-magnifying-glass{
  color: var(--skp-color-muted);
  font-size: 14px;
}
.skillpicker-input{
  flex:1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--skp-color-text);
  font: var(--skp-font-size)/var(--skp-line-height) var(--skp-font-family);
}
.skillpicker-input::placeholder{ color: var(--skp-color-muted); }

.skillpicker-clear{
  background: transparent;
  border: none;
  color: var(--skp-color-muted);
  cursor: pointer; padding: 6px;
  border-radius: 8px; flex: 0 0 auto;
  
}
.skillpicker-clear:hover{
  background: rgba(255,255,255,.05);
  color: var(--skp-color-accent);
}
.skillpicker-field:focus-within{
  
  border-color: var(--skp-color-accent);
}
/* Sizes */
.skillpicker-field.sm{ padding:6px 10px; border-radius:10px; }
.skillpicker-field.sm .skillpicker-input{ font-size:13px; }
.skillpicker-field.lg{ padding:10px 14px; border-radius:14px; }
.skillpicker-field.lg .skillpicker-input{ font-size:16px; }