/* WebCore action-menu dropdowns (codesampels "UI Action Menu Dropdown design" rebuilt: spring open, staggered rows,
   icon + title + description rows, selected tint) - one look for the dashboard and the websites. (c) 2026 Dannny0117 */
.wcs{position:relative;display:block;width:100%;--wcs-r:12px;--wcs-acc:var(--accent,#8b7bff)}
.wcs-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 40px 0 14px;border-radius:var(--wcs-r);border:1px solid var(--line,rgba(255,255,255,.12));
  background:var(--wcs-field,rgba(5,8,20,.45));color:var(--ink,#eef1fb);font:inherit;font-size:14.5px;text-align:start;cursor:pointer;position:relative;
  transition:border-color .2s,box-shadow .2s,background .2s;box-shadow:0 1px 1px -.5px rgba(0,0,0,.08),0 3px 3px -1.5px rgba(0,0,0,.08)}
.wcs-btn::after{content:"";position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;background:currentColor;opacity:.6;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 9a1 1 0 0 0-.707 1.707l5 5a1 1 0 0 0 1.414 0l5-5A1 1 0 0 0 17 9z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 9a1 1 0 0 0-.707 1.707l5 5a1 1 0 0 0 1.414 0l5-5A1 1 0 0 0 17 9z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .35s cubic-bezier(.33,1,.68,1)}
.wcs.open .wcs-btn::after{transform:rotate(180deg)}
.wcs-btn:hover{border-color:var(--line2,rgba(255,255,255,.22))}
.wcs-btn:focus-visible,.wcs.open .wcs-btn{outline:none;border-color:color-mix(in srgb,var(--wcs-acc) 80%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--wcs-acc) 18%,transparent)}
.wcs-btn:disabled{opacity:.55;cursor:not-allowed}
.wcs-btn.wcs-empty .wcs-lab{color:var(--ink3,#7a83a0)}
.wcs-lab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcs-btn .wcs-ico{width:18px;height:18px;flex:none;opacity:.85}
.wc-field .wcs-btn{min-height:46px;border-radius:14px;padding:11px 40px 11px 15px;font-size:15.5px;background:rgba(0,0,0,.25)}
html[data-mode=light] .wc-field .wcs-btn{background:#fff}
.wc-field.invalid .wcs-btn{border-color:#f87171}
/* the menu lives in <body> (never clipped by modals or scroll boxes) */
.wcs-menu{position:fixed;z-index:3000;display:flex;flex-direction:column;padding:6px;border-radius:18px;overflow:hidden;
  background:var(--wcs-menu,rgba(16,20,36,.97));border:1px solid var(--line,rgba(255,255,255,.12));color:var(--ink,#eef1fb);font:14px/1.4 Inter,system-ui,sans-serif;
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 1px 1px -.5px rgba(0,0,0,.3),0 5px 5px -2.5px rgba(0,0,0,.3),0 10px 10px -5px rgba(0,0,0,.3),0 24px 48px -8px rgba(0,0,0,.45);
  transform-origin:center top;opacity:0;scale:1 .4;translate:0 -10px;outline:none;
  transition:scale .6s linear(0,.008 1.1%,.034 2.3%,.134 4.9%,.264 7.3%,.683 14.3%,.797 16.5%,.89 18.6%,.967 20.7%,1.027 22.8%,1.073 25%,1.104 27.3%,1.123 30.6%,1.119 34.3%,1.018 49.5%,.988 58.6%,.985 65.2%,1 84.5%,1),
    translate .5s cubic-bezier(.33,1,.68,1),opacity .2s}
.wcs-menu.up{transform-origin:center bottom}
.wcs-menu.open{opacity:1;scale:1 1;translate:0 0}
.wcs-menu.closing{opacity:0;scale:1 .85;transition:opacity .15s,scale .18s}
.wcs-search{padding:2px 2px 6px}
.wcs-search input{width:100%;height:38px;border-radius:12px;border:1px solid var(--line,rgba(255,255,255,.12));background:rgba(255,255,255,.05);color:inherit;font:inherit;padding:0 12px 0 34px;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a83a0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px 50%;background-size:16px}
.wcs-search input:focus{border-color:color-mix(in srgb,var(--wcs-acc) 70%,transparent)}
.wcs-list{list-style:none;margin:0;padding:0;overflow:auto;flex:1;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain}
.wcs-group{padding:8px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3,#7a83a0)}
.wcs-opt{display:grid;grid-template:"icon name check" auto "icon desc check" auto / min-content 1fr min-content;column-gap:10px;row-gap:2px;align-items:center;padding:8px 10px;border-radius:12px;cursor:pointer;user-select:none;
  color:var(--ink2,#b6bdd3);opacity:0;translate:0 6px;transition:translate .5s cubic-bezier(.33,1,.68,1) calc(var(--i) * 18ms),opacity .3s calc(var(--i) * 18ms),background .15s,color .15s}
.wcs-menu.open .wcs-opt{opacity:1;translate:0 0}
.wcs-opt>b{grid-area:name;font-weight:500;color:var(--ink,#eef1fb);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcs-opt>small{grid-area:desc;color:var(--ink3,#7a83a0);font-size:12.5px;line-height:1.35}
.wcs-opt>.wcs-ico,.wcs-opt>.wcs-sw{grid-area:icon;width:18px;height:18px;opacity:.75}
.wcs-sw{display:block;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.wcs-opt.has-desc>.wcs-ico{align-self:start;margin-top:2px}
.wcs-opt.active{background:color-mix(in srgb,var(--wcs-acc) 12%,transparent)}
.wcs-opt.active>b,.wcs-opt.active>.wcs-ico{color:color-mix(in srgb,var(--wcs-acc) 55%,#fff);opacity:1}
.wcs-opt.selected{background:color-mix(in srgb,var(--wcs-acc) 18%,transparent)}
.wcs-opt.selected>b{color:#fff;font-weight:600}
.wcs-opt.selected:not(:has(.wcs-check))::after{content:"";grid-area:check;width:14px;height:14px;background:color-mix(in srgb,var(--wcs-acc) 60%,#fff);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.wcs-opt.disabled{opacity:.4!important;cursor:not-allowed}
.wcs-check{grid-area:check;width:18px;height:18px;border-radius:6px;border:1px solid var(--line2,rgba(255,255,255,.25))}
.wcs-opt.selected .wcs-check{background:linear-gradient(135deg,var(--wcs-acc),#4f8bf9);border-color:transparent}
.wcs-foot{padding:8px 10px 4px;font-size:12px;color:var(--ink3,#7a83a0);text-align:center}
.wcs-menu.wcs-site{--wcs-menu:rgba(14,18,34,.97);border-radius:18px}
html[data-mode=light] .wcs-menu.wcs-site{--wcs-menu:rgba(255,255,255,.98);--ink:#141a2e;--ink2:#46506b;--line:rgba(20,26,46,.12)}
@media (prefers-reduced-motion:reduce){.wcs-menu,.wcs-opt,.wcs-btn::after{transition:none!important}.wcs-opt{opacity:1;translate:none}}
