/* ============ Page-specific ============ */
.ap-card{background:var(--ap-surface); border:1px solid var(--ap-border); border-radius:var(--ap-radius); box-shadow:var(--ap-shadow);}
.ap-card-head{padding:1.1rem 1.25rem; border-bottom:1px solid var(--ap-border);}
.ap-card-head p{font-size:.78rem; color:var(--ap-secondary); margin:.15rem 0 0;}
.ap-card-body{padding:1.25rem;}
.btn-ap-primary{background:var(--ap-primary); border-color:var(--ap-primary); color:#fff; font-weight:600; font-size:.85rem;}
.btn-ap-primary:hover{background:var(--ap-primary-600); border-color:var(--ap-primary-600); color:#fff;}
.btn-ap-light{background:var(--ap-bg); border-color:var(--ap-border); color:var(--ap-text-strong); font-weight:600; font-size:.85rem;}
.btn-ap-light:hover{background:var(--ap-border);}

.ap-filter-input{background:var(--ap-bg); border:1px solid var(--ap-border); border-radius:var(--ap-radius-sm); font-size:.85rem; color:var(--ap-text-strong); padding:.55rem .8rem;}
.ap-filter-input:focus{outline:none; border-color:var(--ap-primary); background:var(--ap-surface);}

/* Category chips */
.ap-cat-chip{
  border:1px solid var(--ap-border); background:var(--ap-surface); color:var(--ap-text-strong);
  border-radius:20px; padding:.4rem .9rem; font-size:.8rem; font-weight:600; white-space:nowrap; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
}
.ap-cat-chip .count{font-size:.7rem; color:var(--ap-secondary); font-weight:700;}
.ap-cat-chip.active{background:var(--ap-primary); border-color:var(--ap-primary); color:#fff;}
.ap-cat-chip.active .count{color:rgba(255,255,255,.8);}

/* Size toggle */
.ap-size-toggle .btn{padding:.4rem .8rem; font-size:.8rem;}

/* Icon grid */
.ap-icon-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:.6rem;}
.ap-icon-cell{
  border:1px solid var(--ap-border); border-radius:var(--ap-radius-sm); background:var(--ap-surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem .5rem; cursor:pointer; position:relative; transition:border-color .15s ease, background .15s ease;
}
.ap-icon-cell:hover{border-color:var(--ap-primary); background:var(--ap-primary-100);}
.ap-icon-cell i{color:var(--ap-text-strong);}
.ap-icon-cell .name{font-size:.66rem; color:var(--ap-secondary); text-align:center; word-break:break-word; line-height:1.3;}
.ap-icon-cell .copied-badge{
  position:absolute; top:-8px; right:-6px; background:var(--ap-success); color:#fff; font-size:.62rem; font-weight:700;
  padding:.1rem .4rem; border-radius:10px; opacity:0; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease; pointer-events:none;
}
.ap-icon-cell.copied .copied-badge{opacity:1; transform:translateY(0);}

.ap-empty-state{text-align:center; padding:3rem 1rem; color:var(--ap-secondary);}

/* Usage examples */
.ap-usage-row{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center;}