/* Preview-only category surfaces; informational cards keep their existing semantics. */
#cat-grid .cat-card {
  --cat-accent: #079b80;
  --cat-rgb: 7,155,128;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(145deg,rgba(var(--cat-rgb),.055),transparent 66%),var(--preview-card)!important;
  border: 1px solid rgba(var(--cat-rgb),.17)!important;
  box-shadow: 0 3px 10px rgba(17,43,69,.025)!important;
  transition: transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
#cat-grid .cat-card:nth-child(2){--cat-accent:#b58619;--cat-rgb:181,134,25}
#cat-grid .cat-card:nth-child(3){--cat-accent:#2879ce;--cat-rgb:40,121,206}
#cat-grid .cat-card:nth-child(4){--cat-accent:#8058c8;--cat-rgb:128,88,200}
#cat-grid .cat-card:nth-child(5){--cat-accent:#119979;--cat-rgb:17,153,121}
#cat-grid .cat-card::before {
  content:"";
  position:absolute;z-index:-1;pointer-events:none;
  width:132px;height:132px;right:-43px;top:-43px;
  background:var(--cat-accent);opacity:.065;
  clip-path:polygon(50% 0%,61% 23%,85% 15%,77% 39%,100% 50%,77% 61%,85% 85%,61% 77%,50% 100%,39% 77%,15% 85%,23% 61%,0% 50%,23% 39%,15% 15%,39% 23%);
  transition:transform .35s ease,opacity .24s ease;
}
#cat-grid .cat-card::after {
  content:"";position:absolute;pointer-events:none;
  left:calc(50% - 22px);bottom:0;width:44px;height:3px;
  border-radius:3px 3px 0 0;background:var(--cat-accent);opacity:.45;
  transition:width .24s ease,left .24s ease,opacity .24s ease;
}
#cat-grid .cat-ic {
  background:rgba(var(--cat-rgb),.10);color:var(--cat-accent);
  box-shadow:0 0 0 7px rgba(var(--cat-rgb),.035);
  transition:transform .24s ease,background .24s ease,box-shadow .24s ease;
}
#cat-grid .cat-card h3{position:relative}
#cat-grid .cat-card p{position:relative}
html[data-theme="dark"] #cat-grid .cat-card {
  background:linear-gradient(145deg,rgba(var(--cat-rgb),.13),transparent 70%),var(--preview-card)!important;
  border-color:rgba(var(--cat-rgb),.27)!important;
}
html[data-theme="dark"] #cat-grid .cat-card::before{opacity:.12}
html[data-theme="dark"] #cat-grid .cat-ic{color:color-mix(in srgb,var(--cat-accent) 65%,white)}
@media(hover:hover) and (pointer:fine) {
  #cat-grid .cat-card:hover {
    transform:translateY(-5px)!important;
    border-color:rgba(var(--cat-rgb),.48)!important;
    box-shadow:0 14px 28px -14px rgba(var(--cat-rgb),.35)!important;
  }
  #cat-grid .cat-card:hover::before{transform:rotate(16deg) scale(1.08);opacity:.12}
  #cat-grid .cat-card:hover::after{left:calc(50% - 40px);width:80px;opacity:.85}
  #cat-grid .cat-card:hover .cat-ic {
    transform:translateY(-2px) rotate(-5deg);
    background:rgba(var(--cat-rgb),.16);
    box-shadow:0 0 0 10px rgba(var(--cat-rgb),.045);
  }
  html[data-theme="dark"] #cat-grid .cat-card:hover::before{opacity:.2}
}
@media(max-width:640px) {
  #cat-grid .cat-card::before{width:100px;height:100px;right:-35px;top:-35px}
  #cat-grid .cat-card::after{left:12px;width:28px}
  #cat-grid .cat-ic{box-shadow:0 0 0 5px rgba(var(--cat-rgb),.035)}
}
@media(prefers-reduced-motion:reduce) {
  #cat-grid .cat-card,#cat-grid .cat-card::before,#cat-grid .cat-card::after,#cat-grid .cat-ic {
    transition:none!important;animation:none!important;
  }
  #cat-grid .cat-card:hover,#cat-grid .cat-card:hover::before,#cat-grid .cat-card:hover .cat-ic{transform:none!important}
}