/* eCircuitCalc — shared category placeholder pages */
.cat-hero{display:flex;gap:1.6rem;align-items:flex-start;padding:2.5rem 0 1.5rem}
.cat-hero-ic{width:76px;height:76px;flex:none;border-radius:20px;display:grid;place-items:center;
  background:hsl(var(--h) 80% 55%/.15);color:hsl(var(--h) 85% 62%);
  border:1px solid hsl(var(--h) 80% 55%/.35);box-shadow:0 14px 40px -18px hsl(var(--h) 80% 55%/.5)}
.cat-hero-ic svg{width:42px;height:42px}
.cat-hero h1{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:800;letter-spacing:-.02em}
.cat-hero .cat-hero-circuit{margin-top:.8rem;width:min(320px,100%);color:hsl(var(--h) 80% 62%)}
.cat-hero p{color:var(--text2);max-width:560px;margin-top:.5rem}
.cat-meta{display:flex;gap:1.6rem;margin-top:1.2rem;flex-wrap:wrap}
.cat-meta span{font-family:var(--mono);font-size:.8rem;color:var(--text2)}
.cat-meta strong{color:var(--text);font-size:1.05rem;display:block}

/* New: guide/tutorial banner */
.cat-guide{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.2rem 0 0;padding:1rem 1.2rem;
  border-radius:14px;border:1px solid var(--accent);background:linear-gradient(135deg,var(--surface),var(--surface2));
  color:var(--text);font-size:.95rem;transition:transform .3s var(--ease),box-shadow .3s}
.cat-guide:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cat-guide strong{color:var(--accent)}
.cat-guide span{margin-left:auto;font-weight:700;color:var(--accent);white-space:nowrap}

.cat-calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;margin-top:2rem}
.calc-card{display:flex;flex-direction:column;gap:.7rem;padding:1.5rem;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.calc-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:var(--shadow)}
.calc-num{font-family:var(--mono);font-size:.72rem;color:var(--accent)}
.calc-card h3{font-size:1.02rem}
.calc-card p{font-size:.85rem;color:var(--text2);flex:1}
.calc-card .badge{align-self:flex-start}
.calc-card::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.calc-card:hover::after{transform:scaleX(1)}

.related{margin-top:4rem}
.related h2{font-size:1.3rem;margin-bottom:1.2rem}
.related-row{display:flex;gap:.7rem;flex-wrap:wrap}
.related-row a{padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);font-size:.88rem;color:var(--text2);transition:.25s var(--ease)}
.related-row a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}