/* Styles with spinner and bottom View All */
.pda-directory{ --pda-bg:#163a5a; --pda-bg-dark:#112b43; --pda-accent:#2b6aa7; --pda-text:#fff; --pda-muted:#cfe2f5; }
.pda-controls{ background:var(--pda-bg); padding:14px; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.pda-search-wrap{ margin-bottom:10px; }
.pda-search{ width:100%; padding:14px 16px; border-radius:10px; border:2px solid #0e2a45; outline:none; font-size:16px; background:#fff; }
.pda-search::placeholder{ color:#7890a8; }
.pda-alpha{ display:grid; grid-template-columns:repeat(13,1fr); gap:8px; background:var(--pda-bg-dark); padding:10px; border-radius:10px; }
.pda-alpha-btn{ padding:10px 0; border:none; border-radius:8px; background:var(--pda-accent); color:#e8f2ff; font-weight:700; cursor:pointer; box-shadow:inset 0 -2px rgba(0,0,0,.15); transition:transform .05s ease, box-shadow .2s, opacity .2s; }
.pda-alpha-btn:hover{ transform:translateY(-1px); }
.pda-alpha-btn.active{ outline:3px solid #fff; box-shadow:0 0 0 1px rgba(255,255,255,.2), inset 0 -2px rgba(0,0,0,.2); }
.pda-controls .pda-results{ background:#2b6aa7; border-radius:10px; min-height:48px; padding:10px; margin-top:8px; position:relative; }
.pda-results:empty{ display:none; }

/* Spinner */
.pda-results.pda-loading:before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.12); border-radius:10px; }
.pda-results.pda-loading:after{ content:""; position:absolute; left:50%; top:50%; width:28px; height:28px; margin:-14px 0 0 -14px; border:3px solid #fff; border-top-color:transparent; border-radius:50%; animation:pda-spin .8s linear infinite; }
@keyframes pda-spin{ to{ transform:rotate(360deg); } }

.pda-card-list{ list-style:none; margin:0; padding:0; }
.pda-card{ border-bottom:1px solid rgba(255,255,255,.15); }
.pda-card-link{ text-decoration:none; color:#fff; display:block; padding:12px 6px; }
.pda-avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; display:block; }
.pda-avatar.placeholder{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:#d6e3f3; color:#18426b; border-radius:50%; font-weight:700; }
.pda-card-inner{ display:flex; align-items:center; gap:14px; }
.pda-name{ margin:0 0 6px 0; font-size:19px; font-weight:800; color:#fff; }
.pda-meta{ font-size:14px; color:#eaf3ff; }
.pda-line{ margin:2px 0; }
.pda-line a{ color:#eaf3ff; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.65); }
.pda-line a:hover{ border-bottom-style:solid; }

.pda-viewall-bar{ margin-top:8px; }
.pda-viewall-btn{ display:block; width:100%; text-align:center; padding:10px; border-radius:10px; border:0; background:#2b6aa7; color:#fff; font-weight:800; cursor:pointer; text-decoration:none; box-shadow:inset 0 -2px rgba(0,0,0,.15); }
.pda-viewall-btn:hover{ transform:translateY(-1px); }
.pda-viewall-btn.active{ outline:3px solid #fff; }

@media (max-width:640px){ .pda-alpha{ grid-template-columns:repeat(7,1fr); } }