html[data-icon="letter"] .ico img { display: none !important; }
html[data-icon="letter"] .ico span { font-size: 18px; }
html:is([data-skin="paper"], [data-skin="snow"], [data-skin="sakura"], [data-skin="celadon"], [data-skin="shuimo"], [data-skin="daiqing"], [data-skin="zhusha"])[data-icon="logo"] .ico span { color: var(--text); }

html[data-icon="glass"] .ico {
  border: 1px solid rgba(255,255,255,0.34);
  background: linear-gradient(145deg, rgba(255,255,255,0.28), hsla(var(--h),80%,55%,0.12));
  box-shadow: 0 8px 20px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.55), 0 0 18px hsla(var(--h),80%,60%,0.2);
}
html[data-icon="glass"] .ico::after {
  content: "";
  position: absolute;
  inset: 3px 5px 18px;
  z-index: 2;
  border-radius: 8px 8px 50% 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.52), transparent 70%);
  pointer-events: none;
}
html[data-icon="glass"] .ico img { z-index: 1; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35)); }
html[data-icon="glass"] .card:hover .ico img { transform: translateY(-2px) scale(1.08); }

html[data-icon="neon"] .ico {
  border-radius: 50%;
  border: 1px solid hsl(var(--h), 90%, 72%);
  background: radial-gradient(circle, hsla(var(--h),90%,58%,0.18), rgba(3,7,18,0.92) 68%);
  box-shadow: 0 0 5px hsla(var(--h),90%,72%,0.9), 0 0 18px hsla(var(--h),90%,58%,0.55), inset 0 0 10px hsla(var(--h),90%,70%,0.25);
}
html[data-icon="neon"] .ico img { width: 22px; height: 22px; filter: saturate(1.2) drop-shadow(0 0 5px hsla(var(--h),90%,72%,0.75)); }
html[data-icon="neon"] .ico span {
  font-size: 16px;
  color: #fff;
  text-shadow: 0 0 10px hsla(var(--h), 90%, 80%, 0.9);
}
html[data-icon="gem"] .ico {
  border-radius: 8px;
  transform: rotate(45deg) scale(0.78);
  background: linear-gradient(135deg, hsl(var(--h), 85%, 68%), hsl(var(--h), 70%, 28%) 58%, hsl(var(--h), 80%, 48%));
  box-shadow: 0 0 18px hsla(var(--h), 80%, 58%, 0.4), inset 0 1px 0 rgba(255,255,255,0.5);
}
html[data-icon="gem"] .ico img { transform: rotate(-45deg) scale(1.2); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }
html[data-icon="gem"] .ico span {
  transform: rotate(-45deg);
  font-size: 15px;
  color: #fff;
}
html[data-icon="gem"] .card:hover .ico img { transform: rotate(-45deg) scale(1.35); }

html[data-icon="holo"] .ico {
  border-radius: 9px;
  clip-path: polygon(12% 0, 88% 0, 100% 24%, 78% 100%, 22% 100%, 0 24%);
  background: linear-gradient(135deg, hsla(var(--h),95%,75%,0.92), hsla(calc(var(--h) + 70),85%,60%,0.68) 48%, hsla(calc(var(--h) + 150),90%,72%,0.9));
  box-shadow: 0 0 22px hsla(var(--h),85%,64%,0.45), inset 0 1px 0 rgba(255,255,255,0.75);
}
html[data-icon="holo"] .ico::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.62) 43%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.5s ease;
}
html[data-icon="holo"] .card:hover .ico::after { transform: translateX(120%); }
html[data-icon="holo"] .ico img { z-index: 1; filter: saturate(1.15) drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }

html[data-icon="mono"] .ico {
  border: 1px solid hsla(var(--h),30%,78%,0.55);
  background: rgba(8,12,22,0.42);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.035);
}
html[data-icon="mono"] .ico img { filter: grayscale(1) contrast(1.2) brightness(1.35); opacity: 0.86; }
html[data-icon="mono"] .ico span { color: #dce7f7; }
html[data-icon="mono"] .card:hover .ico { border-color: rgba(255,255,255,0.78); box-shadow: 0 0 16px rgba(255,255,255,0.14), inset 0 0 0 3px rgba(255,255,255,0.05); }

html[data-icon="pixel"] .ico {
  border: 2px solid hsl(var(--h),85%,62%);
  border-radius: 2px;
  background: #06120d;
  box-shadow: 4px 4px 0 hsla(calc(var(--h) + 110),85%,58%,0.55);
}
html[data-icon="pixel"] .ico img { width: 26px; height: 26px; image-rendering: pixelated; filter: saturate(1.25) contrast(1.12); }
html[data-icon="pixel"] .ico span { font-family: Consolas, monospace; color: #d9ffe8; }
html[data-icon="pixel"] .card:hover .ico { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 hsla(calc(var(--h) + 110),85%,58%,0.65); }

html[data-icon="outline"] .ico {
  border: 1.5px dashed hsla(var(--h), 90%, 78%, 0.95);
  border-radius: 11px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}
html[data-icon="outline"] .ico img { filter: grayscale(0.12) contrast(1.06); }

html[data-icon="halo"] .ico {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, hsla(var(--h), 90%, 80%, 0.92), hsla(var(--h), 90%, 26%, 0.84));
  box-shadow: 0 0 16px hsla(var(--h), 90%, 70%, 0.45), inset 0 0 0 1px rgba(255,255,255,0.24);
}
html[data-icon="halo"] .ico::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  pointer-events: none;
}
html[data-icon="halo"] .ico img { filter: drop-shadow(0 0 4px hsla(var(--h), 90%, 75%, 0.7)); }

html[data-icon="frame"] .ico {
  border: 2px solid hsl(var(--h), 90%, 78%);
  border-radius: 7px;
  background:
    linear-gradient(130deg, hsla(var(--h), 90%, 85%, 0.36), rgba(255,255,255,0.06) 40%, hsla(var(--h), 65%, 26%, 0.24)),
    linear-gradient(225deg, rgba(0,0,0,0.15), rgba(255,255,255,0.12));
  box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 0 16px hsla(var(--h), 90%, 74%, 0.2);
}
html[data-icon="frame"] .ico img {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

html[data-icon="badge"] .ico {
  border-radius: 4px;
  border: 1px solid hsla(var(--h), 80%, 78%, 0.88);
  background: linear-gradient(165deg, hsla(var(--h), 75%, 28%, 0.26), hsla(var(--h), 70%, 16%, 0.24));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08), 0 0 0 3px hsla(var(--h), 75%, 58%, 0.16);
}
html[data-icon="badge"] .ico img { filter: saturate(1.15) drop-shadow(0 2px 3px rgba(0,0,0,0.32)); }

html[data-icon="ink"] .ico {
  border-radius: 6px;
  background: linear-gradient(155deg, rgba(255,255,255,0.08), hsla(var(--h), 18%, 22%, 0.22) 45%, rgba(255,255,255,0.06) 78%);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.36);
}
html[data-icon="ink"] .ico img { filter: saturate(0.7) contrast(1.18) brightness(1.06); }
html[data-icon="ink"] .ico span { color: #f8fafc; text-shadow: 0 1px 0 rgba(0,0,0,0.35); }

html[data-icon="grain"] .ico {
  border-radius: 10px;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04) 44%, rgba(255,255,255,0.07)),
    repeating-linear-gradient(75deg, rgba(255,255,255,0.09) 0 1px, rgba(0,0,0,0.18) 1px 3px),
    linear-gradient(15deg, rgba(0,0,0,0.18), rgba(255,255,255,0.1));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
html[data-icon="grain"] .ico img { filter: contrast(1.22) brightness(1.1); }

html[data-icon="mirror"] .ico {
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.12) 48%, rgba(0,0,0,0.22) 76%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 0 16px hsla(var(--h), 90%, 78%, 0.34);
}
html[data-icon="mirror"] .ico::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.38));
  opacity: 0.35;
}
html[data-icon="mirror"] .ico::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 16%, rgba(255,255,255,0.72), transparent 46%);
  filter: blur(0.7px);
  pointer-events: none;
}
html[data-icon="mirror"] .ico img { width: 21px; height: 21px; transform: scaleX(-1); }

html[data-icon="circuit"] .ico {
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(255,255,255,0.17), rgba(255,255,255,0.05));
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.35),
    inset -2px -2px 0 rgba(0,0,0,0.2),
    0 0 0 1px hsla(var(--h), 70%, 70%, 0.24);
}
html[data-icon="circuit"] .ico::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 5px, rgba(255,255,255,0.2) 5px 6px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 7px, rgba(0,0,0,0.16) 7px 8px),
    radial-gradient(circle at 25% 40%, rgba(255,255,255,0.28) 0 1.5px, transparent 2px),
    radial-gradient(circle at 72% 62%, rgba(255,255,255,0.22) 0 1px, transparent 1.4px);
  opacity: 0.32;
  pointer-events: none;
}
html[data-icon="circuit"] .ico img { filter: saturate(1.26) drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }

html[data-skin="paper"] .section h2,
html[data-skin="paper"] .appearance-head strong {
  font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
}
html[data-skin="paper"] .search input,
html[data-skin="paper"] .stat,
html[data-skin="paper"] .nav-col {
  color: var(--text);
  border-color: rgba(105,76,44,0.18);
  background: rgba(255,251,240,0.7);
  box-shadow: 0 8px 22px rgba(90,60,20,0.07), inset 0 1px 0 rgba(255,255,255,0.82);
}
html[data-skin="paper"] .search input::placeholder { color: rgba(82,67,49,0.48); }
html[data-skin="paper"] .search input:focus {
  border-color: rgba(138,90,50,0.5);
  box-shadow: 0 0 0 4px rgba(180,120,50,0.12), 0 14px 34px rgba(90,60,20,0.1);
}
html[data-skin="paper"] .appearance-trigger svg { color: #8a5a32; }
html[data-skin="paper"] .appearance-trigger[aria-expanded="true"] {
  border-color: rgba(138,90,50,0.48);
  box-shadow: 0 0 20px rgba(180,120,50,0.14), inset 0 1px 0 rgba(255,255,255,0.75);
}
html[data-skin="paper"] .folder:hover { background: rgba(138,90,50,0.07); }
html[data-skin="paper"] .folder.on {
  background: linear-gradient(90deg, rgba(138,90,50,0.14), rgba(255,255,255,0.2));
  box-shadow: inset 0 0 0 1px rgba(138,90,50,0.24);
}
html[data-skin="paper"] .folder span { color: #796650; }
html[data-skin="paper"] .tag {
  color: #796650;
  border-color: rgba(105,76,44,0.16);
  background: rgba(138,90,50,0.055);
}
html[data-skin="paper"] .dot {
  background: hsl(var(--h), 32%, 48%);
  box-shadow: 0 0 7px hsla(var(--h), 32%, 42%, 0.18);
}
html[data-skin="paper"][data-icon="letter"] .ico {
  background: linear-gradient(145deg, hsl(var(--h), 38%, 50%), hsl(var(--h), 30%, 30%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 5px 12px rgba(90,60,20,0.12);
}
html[data-skin="paper"][data-icon="letter"] .ico span {
  color: #fff9eb;
  text-shadow: none;
}
html[data-skin="paper"][data-icon="logo"] .ico {
  border: 1px solid rgba(105,76,44,0.15);
  background: rgba(255,252,242,0.82);
  box-shadow: 0 5px 12px rgba(90,60,20,0.09);
}