body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,sans-serif;background:var(--bg,#0a0f1f);color:var(--text,#e6edf7);margin:0;line-height:1.6}
.container{max-width:960px;margin:0 auto;padding:1rem}
.cell-url{word-break:break-all}
/* Sticky header & zebra (unified with site.css) */
.tableWrap{max-height:70vh;overflow:auto;border:1px solid var(--border,#1e2230);border-radius:12px}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;background:var(--panel,#0b1224);z-index:2}
tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
tbody tr:hover{background:rgba(255,255,255,.04)}
th,td{padding:10px;border-bottom:1px solid var(--border,#1e2230);vertical-align:top}
/* Focus visibility */
:focus-visible{outline:2px solid var(--focus-ring,#facc15);outline-offset:2px;border-radius:6px}
/* Hover animation for cards & CTA boxes */
:is(.card,.cta-box,.blog-card,.tool-card,.tool-card-enhanced){
  transition:transform 200ms cubic-bezier(0.4,0,0.2,1),border-color 200ms cubic-bezier(0.4,0,0.2,1),box-shadow 200ms cubic-bezier(0.4,0,0.2,1);
  will-change:transform,box-shadow;
}
:is(.card,.cta-box,.blog-card,.tool-card,.tool-card-enhanced):hover,
:is(.card,.cta-box,.blog-card,.tool-card,.tool-card-enhanced):focus-within{
  transform:translateY(-4px);
  border-color:var(--hover-accent,#3b82f6);
  box-shadow:0 12px 40px var(--hover-shadow-color,rgba(59,130,246,.15));
}
@media (prefers-reduced-motion:reduce){
  :is(.card,.cta-box,.blog-card,.tool-card,.tool-card-enhanced):hover,
  :is(.card,.cta-box,.blog-card,.tool-card,.tool-card-enhanced):focus-within{
    transform:none;
  }
}
/* Badges/chips */
.badge.warn{background:#4c3b07;color:#ffd873}
.badge.error{background:#4a1b1b;color:#ffb3b3}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{font-size:12px;padding:2px 6px;border:1px solid #2a3c6e;border-radius:999px;opacity:.85}
/* Spinner */
.spinner{width:16px;height:16px;border:2px solid #7aa2ff;border-top-color:transparent;border-radius:50%;display:inline-block;animation:spin 1s linear infinite;vertical-align:middle;margin-left:6px}
@keyframes spin{to{transform:rotate(360deg)}}
/* Search box */
#search{max-width:320px}