.graphos-dir{font-family:inherit}
.graphos-dir-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 12px}
.graphos-dir-search{flex:1;min-width:240px;padding:10px 12px;border:1px solid #ddd;border-radius:10px}
.graphos-dir-filter{padding:10px 12px;border:1px solid #ddd;border-radius:10px;min-width:200px;background:#fff}
.graphos-dir-alpha{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.gd-alpha-btn{padding:6px 10px;border:1px solid #ddd;border-radius:999px;background:#fff;cursor:pointer;font-size:13px}
.gd-alpha-btn.is-active{border-color:#111;box-shadow:0 0 0 1px #111 inset}
.gd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.gd-card{border:1px solid #e6e6e6;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.gd-card-photo{height:160px;background:#f4f4f4}
.gd-card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.gd-card-body{padding:12px 12px 14px;text-align:center}
.gd-card-name{font-weight:700;margin:2px 0 6px}
.gd-card-work{color:#666;font-size:14px;min-height:18px}
.gd-btn-more{margin-top:10px;padding:9px 14px;border-radius:10px;border:0;background:#6b6b6b;color:#fff;cursor:pointer}
.gd-btn-more:hover{filter:brightness(.95)}
.gd-empty,.gd-loading{padding:18px;border:1px dashed #ddd;border-radius:14px;text-align:center;color:#666}
.gd-pager{display:flex;gap:12px;align-items:center;justify-content:center;margin:16px 0}
.gd-pager-btn{width:38px;height:38px;border-radius:12px;border:1px solid #ddd;background:#fff;cursor:pointer}
.gd-pager-btn:disabled{opacity:.4;cursor:not-allowed}
.gd-pager-info{color:#444}

/* Modal */
body.gd-modal-open{overflow:hidden}
/* Use a very high z-index and keep it fixed to appear above sticky headers/menus */
.graphos-dir-modal{position:fixed;inset:0;z-index:2147483647}
.graphos-dir-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.graphos-dir-modal-panel{position:relative;max-width:980px;margin:5vh auto;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden}
.graphos-dir-modal-close{position:absolute;top:8px;right:12px;width:40px;height:40px;border-radius:12px;border:0;background:#f2f2f2;font-size:26px;line-height:40px;cursor:pointer}
.graphos-dir-modal-body{padding:18px 18px 22px}

/* Detail */
.gd-detail-top{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start}
.gd-detail-photo img{width:100%;height:auto;border-radius:12px;display:block;background:#f4f4f4}
.gd-detail-name{font-weight:800;font-size:20px;margin:4px 0 6px}
.gd-detail-line{margin:4px 0;color:#333}
.gd-detail-work{color:#666}
.gd-detail-label{margin-top:10px;font-weight:700;font-size:13px;color:#111}
.gd-detail-social{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.gd-social{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:1px solid #ddd;color:#111;text-decoration:none;font-weight:700;font-size:12px;background:#fff}
.gd-detail-sep{margin:18px 0;border:0;border-top:1px solid #eee}
.gd-detail-bio h3{margin:0 0 10px}
.gd-detail-bio-text{color:#333;line-height:1.6}
@media (max-width:720px){
  .gd-detail-top{grid-template-columns:1fr}
}

.gd-pager-num{border:1px solid #ddd;background:#fff;padding:6px 10px;border-radius:6px;cursor:pointer}
.gd-pager-num.is-active{background:#111;color:#fff;border-color:#111}
.gd-pager-ellipsis{padding:0 6px;color:#777}
.graphos-dir-toolbar{gap:10px;flex-wrap:wrap}