.phone-directory { --phone-border: var(--border, #29323e); --phone-muted: var(--muted, #91a1b5); }
.phone-directory .panel-card { padding: 20px; min-width: 0; border: 1px solid var(--phone-border); border-radius: 12px; background: var(--panel, #14181e); }
.phone-header,.phone-section-heading,.phone-search-row,.phone-actions,.phone-meta,.phone-content-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.phone-header h2 { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.phone-header p,.phone-section-heading p { margin: 5px 0; }
.phone-header p:not(.eyebrow),.phone-muted,.phone-result small,.phone-account small { color: var(--phone-muted); font-size: 12px; line-height: 1.6; }
.phone-search-card label,.phone-content-controls label { display: grid; gap: 8px; font-size: 12px; font-weight: 600; }
.phone-search-row { margin-top: 8px; flex-wrap: nowrap; }
.phone-search-row input { flex: 1; min-width: 0; }
.phone-directory input,.phone-directory select { background: #0d1219; color: inherit; padding: 12px; border: 1px solid var(--phone-border); border-radius: 7px; min-width: 0; width: 100%; }
.phone-directory input:focus-visible,.phone-directory select:focus-visible,.phone-directory button:focus-visible { outline: 2px solid #75b4ff; outline-offset: 3px; }
.phone-directory button:disabled { opacity: .4; cursor: default; }
.phone-layout { display: grid; grid-template-columns: minmax(240px, 310px) minmax(0, 1fr); gap: 20px; align-items: start; }
.phone-detail { display: grid; gap: 20px; min-width: 0; }
.phone-section-heading { margin-bottom: 16px; }
.phone-section-heading h2,.phone-section-heading h3 { margin: 0; }
.phone-section-heading > span,.phone-content-title > span { font-size: 12px; color: var(--phone-muted); }
.phone-result { display: grid; gap: 6px; width: 100%; text-align: left; background: transparent; color: inherit; padding: 14px 12px; margin-bottom: 8px; border: 1px solid var(--phone-border); border-radius: 8px; cursor: pointer; overflow-wrap: anywhere; }
.phone-result:hover,.phone-account:hover { background: #1c2735; border-color: #53759c; }
.phone-result.is-selected { background: #1b3048; border-color: #659eeb; box-shadow: inset 3px 0 #75b4ff; }
.phone-result strong { font-size: 16px; }.phone-result > span { font-size: 13px; }
.phone-badge { display: inline-flex; width: fit-content; padding: 5px 9px; border-radius: 6px; font-size: 11px; color: #c9bdff; background: #7561b526; border: 1px solid #7561b54d; }
.phone-meta { justify-content: flex-start; font-size: 12px; color: var(--phone-muted); padding: 12px 0; border-top: 1px solid var(--phone-border); }
.phone-characters { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }.phone-characters > div { display: grid; gap: 6px; padding: 12px; background: #0e141d; border-radius: 8px; }.phone-characters small { color: var(--phone-muted); font-size: 11px; }
.phone-directory a { color: #8dbdff; overflow-wrap: anywhere; }
.phone-accounts { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 12px; }
.phone-account { display: grid; align-content: start; gap: 7px; text-align: left; background: #10161f; border: 1px solid var(--phone-border); border-radius: 9px; color: inherit; padding: 14px; cursor: pointer; overflow-wrap: anywhere; }.phone-account p { margin: 0; font-size: 12px; }
.phone-logins,.phone-search-characters { margin-top: 16px; font-size: 12px; overflow-wrap: anywhere; }.phone-directory summary { cursor: pointer; padding: 8px 0; }
.phone-content-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.phone-empty { padding: 32px 16px; text-align: center; color: var(--phone-muted); font-size: 13px; line-height: 1.7; }
.phone-content-title { padding: 14px 0; border-bottom: 1px solid var(--phone-border); font-size: 13px; }
.phone-record { padding: 18px 0; border-bottom: 1px solid var(--phone-border); min-width: 0; }
.phone-record-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 14px; font-size: 14px; line-height: 1.7; }
.phone-record dl { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); gap: 12px; margin: 0; }
.phone-record dl div { min-width: 0; }.phone-record dt { color: var(--phone-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }.phone-record dd { margin: 5px 0 0; font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
.phone-pagination { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 18px; font-size: 11px; }
.phone-activity { scroll-margin-top: 20px; }
@media(max-width: 900px) { .phone-layout { grid-template-columns: 1fr; }.phone-results [data-phone-results] { max-height: 450px; overflow-y: auto; }.phone-content-controls { grid-template-columns: 1fr; } }
@media(max-width: 480px) { .phone-search-row { flex-wrap: wrap; }.phone-search-row input { flex-basis: 100%; }.phone-directory .panel-card { padding: 14px; } }