:root{
  --icon-size:40px; --stroke-w:2; --ms-fill:0; --ms-wght:400;
  --icon-fg:#27272a;
  --card-bg:#ffffff; --card-bd:#e4e4e7; --card-bg-h:#fafafa;
  --label:#71717a; --label-h:#3f3f46;
  --seg-bg:rgba(228,228,231,.7); --seg-on:#ffffff; --seg-on-fg:#18181b; --seg-shadow:0 1px 2px rgba(0,0,0,.1);
  --hover-bg:rgba(228,228,231,.4); --glyph-bg:#f4f4f5;
  --code-bg:#fafafa;
}
html.dark{
  --icon-fg:#d4d4d8;
  --card-bg:rgba(24,24,27,.45); --card-bd:#27272a; --card-bg-h:rgba(24,24,27,.9);
  --label:#71717a; --label-h:#a1a1aa;
  --seg-bg:rgba(39,39,42,.7); --seg-on:#3f3f46; --seg-on-fg:#fafafa; --seg-shadow:none;
  --hover-bg:rgba(39,39,42,.5); --glyph-bg:rgba(63,63,70,.4);
  --code-bg:rgba(9,9,11,.55);
}
.ig-hide{display:none!important}
[data-ctl]{display:none}
[data-ctl].on{display:block}

/* ---------- 图标插槽 ---------- */
.slot{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);font-size:var(--icon-size);color:var(--icon-color,var(--icon-fg));flex:none;line-height:1}
.slot .glyph{font-size:inherit;line-height:1}
.slot svg{width:100%;height:100%;stroke-width:var(--stroke-w,2)}
.slot .material-symbols-rounded{font-size:inherit;line-height:1;font-variation-settings:'FILL' var(--ms-fill,0),'wght' var(--ms-wght,400),'GRAD' 0,'opsz' 24}
.lucide-holder{display:inline-flex;width:100%;height:100%}
.sk{width:56%;height:56%;border-radius:8px;background:currentColor;opacity:.14;animation:pulse 1.1s ease-in-out infinite}

/* ---------- 图标网格 ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 6px 10px;border-radius:14px;border:1px solid var(--card-bd);background:var(--card-bg);cursor:pointer;min-width:0;transition:border-color .15s,background-color .15s,transform .15s;animation:cardIn .3s ease both}
.card:hover{border-color:rgba(99,102,241,.55);background:var(--card-bg-h);transform:translateY(-2px)}
.card:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
.cname{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--label);text-align:center;transition:color .15s}
.card:hover .cname{color:var(--label-h)}
@keyframes cardIn{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
@keyframes pulse{50%{opacity:.05}}

/* ---------- 加载：整片卡片网格作为像素画布（心跳波纹） ---------- */
.pixel-card{min-height:85px;cursor:default;pointer-events:none;animation:none;contain:paint;opacity:.4;transition:opacity .5s cubic-bezier(.22,1,.36,1),background-color .5s cubic-bezier(.22,1,.36,1),border-color .5s cubic-bezier(.22,1,.36,1)}
.pixel-card.is-active{background:rgba(99,102,241,.38);border-color:rgba(99,102,241,.65);opacity:1;transition-duration:.12s}
html.dark .pixel-card.is-active{background:rgba(129,140,248,.34);border-color:rgba(129,140,248,.6)}

/* ---------- 搜索：其他图标库结果 ---------- */
.ol-caption{display:flex;align-items:center;gap:10px;margin:36px 0 4px;font-size:12px;font-weight:500;color:var(--label);white-space:nowrap}
.ol-caption::after{content:'';flex:1;height:1px;background:var(--card-bd)}
.ol-sec{margin-top:20px}
.ol-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.ol-label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--label-h)}
.ol-count{font-size:11px;font-weight:400;color:var(--label)}
.ol-more{display:flex;align-items:center;gap:3px;padding:4px 10px;border-radius:999px;font-size:12px;color:#6366f1;cursor:pointer;transition:background .15s;white-space:nowrap}
.ol-more:hover{background:rgba(99,102,241,.1)}
html.dark .ol-more{color:#a5b4fc}
.ol-hint{display:flex;align-items:center;gap:8px;margin-top:24px;font-size:12px;color:var(--label)}
.ol-hint .spinner{width:14px;height:14px;border-width:2px}

/* ---------- 收藏 ---------- */
.card{position:relative}
.fav-btn{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--label);opacity:0;cursor:pointer;transition:opacity .15s,color .15s,background-color .15s;z-index:1}
.card:hover .fav-btn{opacity:.75}
.fav-btn:hover{opacity:1 !important;color:#e11d48;background:rgba(225,29,72,.08)}
.fav-btn.on{opacity:1;color:#e11d48}
.fav-btn svg{width:13px;height:13px}
#fav-bar{display:flex;align-items:center;gap:2px;height:40px;padding:0 6px 0 12px;border-radius:999px;background:#ffffffee;backdrop-filter:blur(8px);border:1px solid var(--card-bd);box-shadow:0 8px 24px rgba(0,0,0,.14)}
html.dark #fav-bar{background:#18181bee}
#fav-bar .fb-txt{font-size:12px;color:var(--label);white-space:nowrap}
#fav-bar button{height:28px;padding:0 10px;border-radius:999px;font-size:12px;color:var(--label);cursor:pointer;transition:background-color .15s,color .15s}
#fav-bar button:hover{background:var(--hover-bg)}
#fav-bar button.primary{background:#6366f1;color:#fff}
#fav-bar button.primary:hover{background:#4f46e5}
#fav-bar button.danger-armed{color:#e11d48;background:rgba(225,29,72,.1)}
.cmp-cell{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 12px;border-radius:14px;border:1px solid var(--card-bd);background:var(--card-bg);cursor:pointer;transition:border-color .15s}
.cmp-cell:hover{border-color:rgba(99,102,241,.55)}
.cmp-cell .slot{width:64px;height:64px;font-size:64px}

/* ---------- 侧栏库列表 ---------- */
.lib-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s;text-align:left}
.lib-item:hover{background:var(--hover-bg)}
.lib-glyph{width:34px;height:34px;flex:none;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--glyph-bg);color:var(--icon-fg);font-size:16px;overflow:hidden}
.lib-title{display:flex;align-items:center;font-size:13px;font-weight:500;color:var(--label-h)}
.lib-sub{display:block;font-size:11px;color:var(--label);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-item.active{border-color:rgba(99,102,241,.45);background:rgba(99,102,241,.08)}
.lib-item.active .lib-title{color:#6366f1}
html.dark .lib-item.active .lib-title{color:#a5b4fc}

/* ---------- 分段选择器 ---------- */
.seg{display:flex;gap:4px;padding:4px;border-radius:11px;background:var(--seg-bg)}
.seg button{flex:1;padding:5px 2px;font-size:12px;border-radius:8px;color:var(--label);cursor:pointer;transition:.15s;white-space:nowrap}
.seg button:hover{color:var(--label-h)}
.seg button.active{background:var(--seg-on);color:var(--seg-on-fg);font-weight:500;box-shadow:var(--seg-shadow)}
.seg-wrap{flex-wrap:wrap}
.seg-wrap button{flex:1 1 28%}
.seg-mini{padding:2px;border-radius:9px;gap:2px}
.seg-mini button{padding:3px 10px;font-size:11px;flex:none}

/* ---------- 开关 / 色块 / 筹码 ---------- */
.switch{width:38px;height:22px;flex:none;border-radius:999px;background:var(--seg-bg);border:1px solid var(--card-bd);position:relative;cursor:pointer;transition:.2s}
.switch.on{background:#6366f1;border-color:#6366f1}
.switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch.on .knob{left:18px}
.sw{width:24px;height:24px;border-radius:8px;border:1px solid rgba(0,0,0,.12);cursor:pointer;position:relative;flex:none;transition:.15s}
.sw.auto{background:linear-gradient(135deg,#27272a 50%,#e4e4e7 50%)}
.sw.custom{background:conic-gradient(#f87171,#fbbf24,#34d399,#60a5fa,#a78bfa,#f472b6,#f87171)}
.sw.active{outline:2px solid #6366f1;outline-offset:2px}
.chip{flex:none;padding:6px 12px;border-radius:999px;font-size:12px;color:var(--label);border:1px solid var(--card-bd);background:var(--card-bg);cursor:pointer;transition:.15s;white-space:nowrap}
.chip.active{color:#6366f1;border-color:rgba(99,102,241,.5);background:rgba(99,102,241,.08);font-weight:500}

/* ---------- 弹窗 / 代码行 / 提示 ---------- */
.code-box{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;padding:7px 10px;border-radius:8px;border:1px solid var(--card-bd);background:var(--code-bg);color:var(--label-h);outline:none;resize:none}
.code-box:focus{border-color:rgba(99,102,241,.5)}
.copy-btn{flex:none;width:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--label);border:1px solid var(--card-bd);background:var(--card-bg);cursor:pointer;transition:.15s}
.copy-btn:hover{color:#6366f1;border-color:rgba(99,102,241,.5)}
.size-cell{display:flex;flex-direction:column;align-items:center;gap:6px}
.size-cell>span:not(.slot){font-size:10px;font-family:ui-monospace,Menlo,monospace;color:var(--label)}
.spinner{width:26px;height:26px;border-radius:50%;border:3px solid rgba(99,102,241,.18);border-top-color:#6366f1;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:#18181b;color:#fafafa;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none}
html.dark .toast{background:#fafafa;color:#18181b}
.toast.show{opacity:1;transform:none}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(120,120,130,.3);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(120,120,130,.5)}
::-webkit-scrollbar-track{background:transparent}
#lib-list::-webkit-scrollbar{width:5px}

/* ---------- 移动端抽屉侧栏 ---------- */
@media (max-width:1023px){
  #sidebar{position:fixed;top:0;left:0;bottom:0;z-index:40;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.25);background:#fff}
  html.dark #sidebar{background:#18181b}
  #sidebar.open{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .pixel-card{animation:none;transition:none}
}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--seg-bg)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#6366f1;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25)}