.collpop {
  
  --cp-w: 14.25rem;            
  --cp-anim: 0.16s;         
  --cp-pad-y: 0;                 
  --cp-pad-x: 0.75rem;           
  --cp-ic: 1rem;            
  --cp-ck-svg: 0.875rem;        

  position: fixed;
  z-index: var(--z-popover);
  width: var(--cp-w);
  background: var(--surface);
  border: none;
  


  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;

  
  opacity: 0;
  transform: translateY(-0.25rem) scale(0.98);
  transform-origin: top right;
  transition: opacity var(--cp-anim) var(--ease), transform var(--cp-anim) var(--ease);
}
.collpop.open { opacity: 1; transform: none; }
.collpop.up   { transform-origin: bottom right; }   


.collpop .cp-menu {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}


.cp-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem; 
  width: 100%;
  border: none;
  background: transparent;
  min-height: 2.5rem;
  padding: var(--cp-pad-y) var(--cp-pad-x);
  border-radius: calc(var(--r-xl) - 0.5rem);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cp-opt:hover { background: var(--fill-hover); } 


.cp-opt .cp-opt-ic {
  flex: none;
  width: var(--cp-ic);
  height: var(--cp-ic);
  color: var(--text-faint);
  display: grid;
  place-items: center;
}
.cp-opt .cp-opt-ic svg { width: var(--cp-ic); height: var(--cp-ic); }
.cp-opt.on .cp-opt-ic,
.cp-opt:hover .cp-opt-ic { color: var(--text-soft); }


.cp-opt .cp-opt-t {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.cp-opt .cp-opt-ck {
  flex: none;
  width: var(--cp-ic);
  height: var(--cp-ic);
  color: var(--text);
  opacity: 0;
  display: grid;
  place-items: center;
}
.cp-opt .cp-opt-ck svg { width: var(--cp-ck-svg); height: var(--cp-ck-svg); }


.cp-opt.on { font-weight: 600; }
.cp-opt.on .cp-opt-ck { opacity: 1; }


.cp-opt.new { color: var(--text-soft); }
.cp-opt.new:hover { color: var(--text); }


.collpop .cp-div {
  height: 0.0625rem;
  background: var(--border);
  margin: 0.3125rem 0.375rem;
}


.cp-opt.cp-inew {
  cursor: default;
  background: var(--surface-2);
}
.cp-opt.cp-inew .cp-opt-ic { color: var(--text-soft); }
.cp-opt.cp-inew input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text);
}
.cp-opt.cp-inew input::placeholder { color: var(--text-faint); }











@media (max-width: 767.98px) {
  .collpop {
    
    --cp-w: min(17.5rem, calc(100vw - 2rem));
    --cp-anim: 0.3s;
    font-size: calc(1rem * 8 / 7);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 1.375em;
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.04);
    transform: translateY(-0.5em);
    transition: opacity var(--cp-anim) cubic-bezier(0.625, 0.05, 0, 1), transform var(--cp-anim) cubic-bezier(0.625, 0.05, 0, 1);
  }
  .collpop .cp-menu { padding: 0.5em; gap: 2px; }
  .cp-opt {
    min-height: 1.875em;
    padding: 0 0.625em 0 0.875em;
    border-radius: var(--r-pill);
    font-size: 1em;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text-soft); 
  }
  .cp-opt.on {
    background: color-mix(in srgb, var(--text) 5.5%, transparent);
    color: var(--text);
    font-weight: 400;
  }
  .cp-opt.cp-inew input { color: var(--text); font-size: 1em; }
  .collpop .cp-div { margin: 0.25em 0.5em; background: color-mix(in srgb, var(--text) 10%, transparent); }
}