/* ============================================
   CSS Icon System - Unified & Fixed
   font-size drives all em-based shapes
   ============================================ */
.css-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  color: currentColor;
  vertical-align: -0.15em;
  line-height: 1;
  font-size: 16px;
  speak: never;
}
.css-icon::before,
.css-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

/* Icon sizes - set font-size so em shapes scale correctly */
.topnav .css-icon,
.top-right .css-icon {
  font-size: var(--top-icon, 1.15em);
}
.nav-ico .css-icon {
  font-size: var(--nav-icon, 1.2em);
}
.search-wrap button .css-icon {
  font-size: 22px;
}
.module-icon .css-icon {
  font-size: 18px;
}
.module-head .more .css-icon {
  font-size: 12px;
}
.notice > .css-icon {
  font-size: 18px;
}

/* Mobile icon sizes */
.mobile-cat-toggle .css-icon,
.mobile-search-toggle .css-icon,
.mobile-search-line .css-icon,
.mobile-menu .css-icon,
.mobile-side-toggle .css-icon,
.backtop .css-icon {
  font-size: 22px;
}
.mobile-top-nav .css-icon,
.mobile-auth-row .css-icon {
  font-size: 18px;
}

/* Icon state helpers */
body.mobile-search-open .mobile-search-toggle .css-icon { display: none; }
body.mobile-top-open .mobile-menu .css-icon { opacity: 0; }
body.nav-collapsed .collapse-btn .css-icon { transform: rotate(180deg); }
.collapse-btn .css-icon { transition: transform .2s ease; }

/* ============================================
   Icon Shapes
   ============================================ */

/* Search */
.css-icon-search::before { width: 68%; height: 68%; left: 8%; top: 6%; border: 2px solid currentColor; border-radius: 50%; }
.css-icon-search::after { width: 42%; height: 2px; right: 0; bottom: 8%; background: currentColor; transform: rotate(45deg); transform-origin: right center; }

/* Menu */
.css-icon-menu::before { left: 12%; right: 12%; top: 24%; height: 2px; background: currentColor; box-shadow: 0 .34em 0 currentColor, 0 .68em 0 currentColor; }

/* Home */
.css-icon-home::before { width: 70%; height: 70%; left: 15%; top: 28%; border: 2px solid currentColor; border-top: 0; }
.css-icon-home::after { width: 64%; height: 64%; left: 18%; top: 3%; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }

/* Grid */
.css-icon-grid::before { inset: 12%; background: currentColor; clip-path: polygon(0 0,42% 0,42% 42%,0 42%,0 0,58% 0,100% 0,100% 42%,58% 42%,58% 0,0 58%,42% 58%,42% 100%,0 100%,0 58%,58% 58%,100% 58%,100% 100%,58% 100%,58% 58%); }

/* Rank */
.css-icon-rank::before { left: 18%; bottom: 12%; width: 12%; height: 44%; background: currentColor; box-shadow: .36em -.28em 0 currentColor, .72em .08em 0 currentColor; }

/* Plus */
.css-icon-plus::before { left: 15%; right: 15%; top: 50%; height: 2px; background: currentColor; transform: translateY(-50%); }
.css-icon-plus::after { top: 15%; bottom: 15%; left: 50%; width: 2px; background: currentColor; transform: translateX(-50%); }

/* Info */
.css-icon-info::before { inset: 10%; border: 2px solid currentColor; border-radius: 50%; }
.css-icon-info::after { left: 50%; top: 42%; width: 2px; height: 34%; background: currentColor; transform: translateX(-50%); box-shadow: 0 -.38em 0 currentColor; }

/* Like */
.css-icon-like::before { left: 12%; top: 38%; width: 28%; height: 42%; border: 2px solid currentColor; border-radius: 2px; }
.css-icon-like::after { right: 8%; top: 18%; width: 55%; height: 62%; border: 2px solid currentColor; border-left: 0; border-radius: 4px; transform: skewY(-12deg); }

/* Dislike */
.css-icon-dislike::before { left: 12%; top: 20%; width: 28%; height: 42%; border: 2px solid currentColor; border-radius: 2px; }
.css-icon-dislike::after { right: 8%; top: 20%; width: 55%; height: 62%; border: 2px solid currentColor; border-left: 0; border-radius: 4px; transform: skewY(12deg) rotate(180deg); }

/* Heart */
.css-icon-heart::before { width: 58%; height: 58%; left: 21%; top: 20%; background: currentColor; transform: rotate(45deg); border-radius: 10% 10% 0 10%; }
.css-icon-heart::after { width: 42%; height: 42%; left: 18%; top: 10%; background: currentColor; border-radius: 50%; box-shadow: .32em 0 0 currentColor; }

/* External */
.css-icon-external::before { right: 12%; top: 12%; width: 52%; height: 52%; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.css-icon-external::after { left: 18%; bottom: 16%; width: 70%; height: 2px; background: currentColor; transform: rotate(-45deg); transform-origin: right center; }

/* Arrow Right */
.css-icon-arrow-right::before { left: 14%; right: 20%; top: 50%; height: 2px; background: currentColor; transform: translateY(-50%); }
.css-icon-arrow-right::after { right: 14%; top: 32%; width: 36%; height: 36%; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }

/* Arrow Left */
.css-icon-arrow-left::before { left: 20%; right: 14%; top: 50%; height: 2px; background: currentColor; transform: translateY(-50%); }
.css-icon-arrow-left::after { left: 14%; top: 32%; width: 36%; height: 36%; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

/* Arrow Up */
.css-icon-arrow-up::before { left: 50%; top: 18%; width: 2px; height: 64%; background: currentColor; transform: translateX(-50%); }
.css-icon-arrow-up::after { left: 32%; top: 18%; width: 36%; height: 36%; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }

/* Download */
.css-icon-download::before { left: 50%; top: 10%; width: 2px; height: 58%; background: currentColor; transform: translateX(-50%); }
.css-icon-download::after { left: 25%; bottom: 12%; width: 50%; height: 50%; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

/* Send */
.css-icon-send::before { inset: 12%; background: currentColor; clip-path: polygon(0 12%,100% 0,58% 100%,43% 58%); }

/* Login */
.css-icon-login::before { left: 12%; top: 18%; width: 48%; height: 64%; border: 2px solid currentColor; border-right: 0; }
.css-icon-login::after { right: 10%; top: 50%; width: 62%; height: 2px; background: currentColor; transform: translateY(-50%); box-shadow: .22em -.22em 0 -1px currentColor, .22em .22em 0 -1px currentColor; }

/* Key */
.css-icon-key::before { left: 8%; top: 34%; width: 42%; height: 42%; border: 2px solid currentColor; border-radius: 50%; }
.css-icon-key::after { left: 46%; top: 50%; width: 46%; height: 2px; background: currentColor; box-shadow: .2em .16em 0 currentColor; }

/* Phone */
.css-icon-phone::before { inset: 8% 24%; border: 2px solid currentColor; border-radius: 3px; }
.css-icon-phone::after { left: 45%; bottom: 14%; width: 10%; height: 2px; background: currentColor; }

/* Cloud */
.css-icon-cloud::before { left: 10%; right: 10%; bottom: 20%; height: 38%; border: 2px solid currentColor; border-radius: 999px; }
.css-icon-cloud::after { left: 31%; top: 22%; width: 40%; height: 40%; border: 2px solid currentColor; border-radius: 50%; border-bottom-color: transparent; }

/* Music */
.css-icon-music::before { right: 22%; top: 12%; width: 2px; height: 62%; background: currentColor; box-shadow: .34em 0 0 currentColor; }
.css-icon-music::after { left: 18%; bottom: 10%; width: 35%; height: 28%; border: 2px solid currentColor; border-radius: 50%; }

/* Site */
.css-icon-site::before { inset: 16%; border: 2px solid currentColor; }
.css-icon-site::after { left: 20%; right: 20%; top: 42%; height: 2px; background: currentColor; box-shadow: 0 .28em 0 currentColor; }

/* Play */
.css-icon-play::before { inset: 12%; border: 2px solid currentColor; border-radius: 2px; }
.css-icon-play::after { left: 42%; top: 32%; border-left: .42em solid currentColor; border-top: .26em solid transparent; border-bottom: .26em solid transparent; }

/* Video */
.css-icon-video::before { inset: 16%; border: 2px solid currentColor; border-radius: 3px; }
.css-icon-video::after { right: 7%; top: 34%; border-left: .45em solid currentColor; border-top: .28em solid transparent; border-bottom: .28em solid transparent; }

/* Star */
.css-icon-star::before { inset: 8%; background: currentColor; clip-path: polygon(50% 0,62% 35%,100% 35%,69% 56%,80% 94%,50% 72%,20% 94%,31% 56%,0 35%,38% 35%); }

/* Hot */
.css-icon-hot::before { left: 24%; top: 8%; width: 52%; height: 78%; background: currentColor; clip-path: polygon(46% 0,70% 28%,92% 48%,82% 84%,50% 100%,18% 84%,8% 48%,36% 30%); }

/* Anime */
.css-icon-anime::before { inset: 14%; border: 2px solid currentColor; border-radius: 4px; }
.css-icon-anime::after { left: 27%; right: 27%; top: 36%; height: 2px; background: currentColor; box-shadow: 0 .32em 0 currentColor; }

/* Megaphone */
.css-icon-megaphone::before { left: 10%; top: 36%; width: 52%; height: 32%; border: 2px solid currentColor; transform: skewY(-12deg); }
.css-icon-megaphone::after { right: 8%; top: 25%; width: 28%; height: 50%; border: 2px solid currentColor; border-left: 0; }

/* Collapse */
.css-icon-collapse::before { left: 18%; right: 18%; top: 50%; height: 2px; background: currentColor; transform: translateY(-50%); }
.css-icon-collapse::after { left: 18%; top: 30%; width: 38%; height: 38%; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(-45deg); }

/* Briefcase */
.css-icon-briefcase::before { left: 12%; right: 12%; top: 30%; bottom: 16%; border: 2px solid currentColor; border-radius: 3px; }
.css-icon-briefcase::after { left: 36%; right: 36%; top: 16%; height: 18%; border: 2px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0; }

/* Feedback */
.css-icon-feedback::before { inset: 12%; border: 2px solid currentColor; border-radius: 4px; }
.css-icon-feedback::after { left: 28%; right: 28%; top: 36%; height: 2px; background: currentColor; box-shadow: 0 .32em 0 currentColor; }

/* Swipe */
.css-icon-swipe::before { left: 18%; top: 50%; width: 64%; height: 2px; background: currentColor; transform: translateY(-50%); }
.css-icon-swipe::after { right: 14%; top: 32%; width: 36%; height: 36%; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); box-shadow: -.48em .48em 0 -1px currentColor; }

/* Pin */
.css-icon-pin::before { left: 32%; top: 8%; width: 36%; height: 50%; border: 2px solid currentColor; border-radius: 50% 50% 45% 45%; transform: rotate(45deg); }
.css-icon-pin::after { left: 48%; top: 34%; width: 2px; height: 54%; background: currentColor; transform: translateX(-50%) rotate(25deg); }

/* Chart */
.css-icon-chart::before { left: 12%; right: 12%; bottom: 14%; height: 2px; background: currentColor; box-shadow: 0 -.72em 0 -1px currentColor; }
.css-icon-chart::after { left: 18%; bottom: 20%; width: 12%; height: 34%; background: currentColor; box-shadow: .34em -.18em 0 currentColor, .68em -.42em 0 currentColor; }

/* Trend */
.css-icon-trend::before { left: 12%; right: 12%; top: 56%; height: 2px; background: currentColor; transform: rotate(-28deg); }
.css-icon-trend::after { right: 12%; top: 22%; width: 35%; height: 35%; border-right: 2px solid currentColor; border-top: 2px solid currentColor; }

/* QR */
.css-icon-qr::before { inset: 10%; background: currentColor; clip-path: polygon(0 0,34% 0,34% 34%,0 34%,0 0,66% 0,100% 0,100% 34%,66% 34%,66% 0,0 66%,34% 66%,34% 100%,0 100%,0 66%,66% 66%,78% 66%,78% 78%,100% 78%,100% 100%,66% 100%,66% 66%); }
.css-icon-qr::after { left: 16%; top: 16%; width: 12%; height: 12%; background: var(--panel, #2d2e2f); box-shadow: .58em 0 0 var(--panel, #2d2e2f), 0 .58em 0 var(--panel, #2d2e2f); }

/* Save */
.css-icon-save::before { inset: 12%; border: 2px solid currentColor; border-radius: 2px; }
.css-icon-save::after { left: 28%; right: 28%; bottom: 18%; height: 24%; border: 2px solid currentColor; border-bottom: 0; }

/* Check */
.css-icon-check::before { left: 18%; top: 52%; width: 28%; height: 2px; background: currentColor; transform: rotate(45deg); transform-origin: left center; }
.css-icon-check::after { left: 36%; top: 62%; width: 52%; height: 2px; background: currentColor; transform: rotate(-45deg); transform-origin: left center; }

/* Alert */
.css-icon-alert::before { left: 50%; top: 8%; width: 76%; height: 76%; border: 2px solid currentColor; border-radius: 8px; transform: translateX(-50%) rotate(45deg); }
.css-icon-alert::after { left: 50%; top: 28%; width: 2px; height: 36%; background: currentColor; transform: translateX(-50%); box-shadow: 0 .46em 0 currentColor; }

/* Generic */
.css-icon[class*="generic"]::before { inset: 18%; border: 2px solid currentColor; border-radius: 50%; }

/* Homepage category line icons (SVG enhancement in icons.js, CSS fallback here). */
.css-icon-crown::before { left: 12%; top: 20%; width: 76%; height: 58%; border: 2px solid currentColor; border-top: 0; transform: skewY(-4deg); }
.css-icon-crown::after { left: 12%; top: 16%; width: 76%; height: 2px; background: currentColor; box-shadow: -.02em -.16em 0 -.25px currentColor, .4em -.2em 0 -.25px currentColor, .8em -.12em 0 -.25px currentColor; transform: rotate(-8deg); }
.css-icon-film::before { inset: 14%; border: 2px solid currentColor; border-radius: 3px; }
.css-icon-film::after { left: 30%; top: 14%; width: 2px; height: 72%; background: currentColor; box-shadow: .42em 0 0 currentColor; }
.css-icon-book::before { left: 14%; top: 12%; width: 72%; height: 76%; border: 2px solid currentColor; border-radius: 2px 4px 4px 2px; }
.css-icon-book::after { left: 30%; top: 12%; height: 76%; width: 2px; background: currentColor; }
.css-icon-novel::before { left: 12%; top: 12%; width: 36%; height: 76%; border: 2px solid currentColor; border-right: 0; border-radius: 3px 0 0 3px; transform: skewY(-2deg); }
.css-icon-novel::after { right: 12%; top: 12%; width: 36%; height: 76%; border: 2px solid currentColor; border-left: 0; border-radius: 0 3px 3px 0; transform: skewY(2deg); }
.css-icon-comic::before { inset: 14%; border: 2px solid currentColor; border-radius: 4px; }
.css-icon-comic::after { left: 28%; right: 28%; top: 38%; height: 2px; background: currentColor; box-shadow: 0 .3em 0 currentColor; }
.css-icon-manga::before { inset: 12%; border: 2px solid currentColor; border-radius: 3px; }
.css-icon-manga::after { left: 28%; top: 34%; width: 44%; height: 25%; border: 2px solid currentColor; border-radius: 50%; box-shadow: -0.18em 0 0 -1px currentColor, 0.18em 0 0 -1px currentColor; }
.css-icon-link::before { left: 14%; top: 32%; width: 48%; height: 34%; border: 2px solid currentColor; border-radius: 8px; transform: rotate(-35deg); }
.css-icon-link::after { right: 14%; top: 32%; width: 48%; height: 34%; border: 2px solid currentColor; border-radius: 8px; transform: rotate(-35deg); }
.css-icon-edit::before { left: 18%; top: 22%; width: 54%; height: 54%; border: 2px solid currentColor; transform: rotate(-45deg); }
.css-icon-edit::after { right: 10%; top: 15%; width: 24%; height: 2px; background: currentColor; transform: rotate(-45deg); box-shadow: -.15em .15em 0 currentColor; }
.css-icon-database::before { left: 16%; top: 12%; width: 68%; height: 28%; border: 2px solid currentColor; border-radius: 50%; box-shadow: 0 .38em 0 -2px var(--site-bg, #171a1d), 0 .38em 0 0 currentColor, 0 .76em 0 -2px var(--site-bg, #171a1d), 0 .76em 0 0 currentColor; }
.css-icon-database::after { left: 16%; top: 25%; width: 2px; height: 55%; background: currentColor; box-shadow: .66em 0 0 currentColor; }
.css-icon-server::before { left: 12%; top: 14%; width: 76%; height: 28%; border: 2px solid currentColor; border-radius: 2px; box-shadow: 0 .62em 0 -2px var(--site-bg, #171a1d), 0 .62em 0 0 currentColor; }
.css-icon-server::after { left: 25%; top: 27%; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 .62em 0 currentColor; }
.css-icon-globe::before { inset: 12%; border: 2px solid currentColor; border-radius: 50%; }
.css-icon-globe::after { left: 12%; right: 12%; top: 48%; height: 2px; background: currentColor; box-shadow: .33em 0 0 -1px transparent; }
.css-icon-wrench::before { left: 22%; top: 54%; width: 58%; height: 2px; background: currentColor; transform: rotate(-45deg); transform-origin: left center; }
.css-icon-wrench::after { right: 12%; top: 12%; width: 35%; height: 35%; border: 2px solid currentColor; border-radius: 50%; }
.css-icon-forum::before { inset: 14% 12% 24%; border: 2px solid currentColor; border-radius: 4px; }
.css-icon-forum::after { left: 22%; bottom: 12%; width: 26%; height: 26%; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: skewX(-25deg); }
/* Refresh */
.css-icon-refresh::before { inset: 12%; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.css-icon-refresh::after { right: 10%; top: 12%; width: 30%; height: 30%; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }

/* Catalog */
.css-icon-catalog::before { left: 12%; top: 18%; width: 40%; height: 2px; background: currentColor; box-shadow: 0 .34em 0 currentColor, 0 .68em 0 currentColor; }
.css-icon-catalog::after { right: 12%; top: 32%; width: 0; height: 0; border-left: .55em solid currentColor; border-top: .38em solid transparent; border-bottom: .38em solid transparent; }

/* Shared SVG icon layer. Existing CSS-drawn icons remain as a no-script fallback. */
.css-icon[data-icon-ready]::before,
.css-icon[data-icon-ready]::after {
  content: none !important;
  display: none !important;
}

.css-icon[data-icon-ready] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.css-icon[data-icon-ready] > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.css-icon {
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  vertical-align: -.125em;
  color: currentColor;
  line-height: 1;
}

/* Initial-based site marks get consistent optical alignment across pages. */
.site-icon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 12px rgba(0, 0, 0, .12);
}

.site-icon::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), transparent 52%);
  pointer-events: none;
}

.site-icon > span,
.site-icon:not(:has(> span)) {
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .css-icon {
    animation: none !important;
    transition: none !important;
  }
}