.public-directory-page { min-height: 100vh; background: var(--ui-bg, #eef4f8); color: var(--ui-text, #122235); }
.directory-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 44px; display: grid; gap: 16px; }
.directory-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 26px 28px; border: 1px solid #a9d5ef; border-radius: 18px; background: linear-gradient(135deg, #eef8ff, #fff); }
.directory-kicker { margin: 0 0 7px; color: #087ac1; font: 800 11px/1.1 var(--ui-mono, Consolas, monospace); letter-spacing: .1em; }
.directory-hero h1 { margin: 0; color: #102b45; font-size: clamp(34px, 6vw, 58px); letter-spacing: -.05em; line-height: 1; }
.directory-hero p:not(.directory-kicker) { max-width: 680px; margin: 10px 0 0; color: #5c7084; font-size: 14px; }
.directory-status { flex: 0 0 auto; padding: 9px 12px; border: 1px solid #b9d7e9; border-radius: 999px; color: #087ac1; background: rgba(255,255,255,.8); font-size: 12px; font-weight: 800; }
.directory-status[data-state="error"] { color: #b33c48; border-color: #e7b8bf; background: #fff4f5; }
.directory-status[data-state="locked"] { color: #8a5a12; border-color: #e6ca8a; background: #fff9e9; }
.directory-status[data-state="success"] { color: #19724c; border-color: #a8d9c1; background: #f1fbf5; }
.directory-access-lock { padding: 26px 28px; border: 1px solid #b9d7e9; border-radius: 16px; background: var(--ui-surface, #fff); box-shadow: 0 12px 28px rgba(21, 67, 102, .08); }
.directory-access-lock h2 { margin: 0; color: var(--ui-text, #122235); font-size: clamp(22px, 4vw, 32px); }
.directory-access-lock p:not(.directory-kicker) { max-width: 680px; margin: 10px 0 18px; color: var(--ui-text-secondary, #5c7084); font-size: 14px; line-height: 1.65; }
.directory-shell--locked > .directory-card, .directory-shell--locked > .directory-note { display: none; }
.directory-card { min-width: 0; padding: 20px; border: 1px solid var(--ui-border, #c8d8e5); border-radius: 16px; background: var(--ui-surface, #fff); }
.directory-toolbar { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(190px, .8fr) auto; align-items: end; gap: 12px; }
.directory-toolbar label { display: grid; gap: 6px; color: var(--ui-text-secondary, #5c7084); font-size: 12px; font-weight: 800; }
.directory-toolbar .ui-button { height: 42px; white-space: nowrap; }
.directory-summary { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--ui-border, #c8d8e5); color: var(--ui-text-tertiary, #8294a6); font-size: 12px; }
.directory-summary strong { color: var(--ui-text, #122235); font-size: 15px; }
.directory-card-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.directory-card-head h2 { margin: 0; color: var(--ui-text, #122235); font-size: 22px; }
.directory-card-head > span { color: var(--ui-text-tertiary, #8294a6); font: 700 11px var(--ui-mono, Consolas, monospace); }
.directory-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.directory-player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 13px; border: 1px solid var(--ui-border, #c8d8e5); border-radius: 13px; background: var(--ui-surface-soft, #f4f8fb); }
.directory-player__number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: #087ac1; font-size: 13px; font-weight: 900; }
.directory-player__main { min-width: 0; }
.directory-player__main strong, .directory-player__main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directory-player__main strong { color: var(--ui-text, #122235); font-size: 16px; }
.directory-player__main span { margin-top: 4px; color: var(--ui-text-secondary, #5c7084); font-size: 12px; }
.directory-player__meta { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }
.directory-player__meta span { padding: 5px 8px; border: 1px solid var(--ui-border, #c8d8e5); border-radius: 999px; color: var(--ui-text-secondary, #5c7084); background: var(--ui-surface, #fff); font-size: 11px; white-space: nowrap; }
.directory-player__meta a { padding: 6px 9px; border-radius: 8px; color: #fff; background: #087ac1; font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.directory-player__meta a:hover, .directory-player__meta a:focus-visible { background: #075e9e; }
.directory-empty { grid-column: 1 / -1; margin: 0; padding: 30px 12px; color: var(--ui-text-tertiary, #8294a6); text-align: center; }
.directory-note, .directory-footer { color: var(--ui-text-tertiary, #8294a6); font-size: 12px; }
.directory-note { margin: 0 4px; }
.directory-footer { padding: 18px 16px 34px; font: 700 11px var(--ui-mono, Consolas, monospace); letter-spacing: .08em; text-align: center; }
html[data-theme="dark"] .public-directory-page { background: #0a111a; }
html[data-theme="dark"] .directory-hero { border-color: #2b536d; background: linear-gradient(135deg, #12283a, #101b28); }
html[data-theme="dark"] .directory-hero h1, html[data-theme="dark"] .directory-card-head h2, html[data-theme="dark"] .directory-summary strong, html[data-theme="dark"] .directory-player__main strong { color: #f1f7fb; }
html[data-theme="dark"] .directory-status { border-color: #36556a; color: #9dd8ff; background: #152635; }
html[data-theme="dark"] .directory-status[data-state="error"] { color: #ffb5bc; border-color: #70434b; background: #321c22; }
html[data-theme="dark"] .directory-status[data-state="locked"] { color: #f6d58d; border-color: #705a2f; background: #302818; }
html[data-theme="dark"] .directory-status[data-state="success"] { color: #9ae0b9; border-color: #32694d; background: #142b20; }
html[data-theme="dark"] .directory-access-lock { border-color: #36556a; background: #111c28; box-shadow: 0 12px 28px rgba(0, 0, 0, .18); }
html[data-theme="dark"] .directory-access-lock h2 { color: #f1f7fb; }
html[data-theme="dark"] .directory-access-lock p:not(.directory-kicker) { color: #b6c8d7; }
@media (max-width: 820px) { .directory-hero { align-items: start; flex-direction: column; padding: 21px; }.directory-status { align-self: start; }.directory-toolbar { grid-template-columns: 1fr 1fr; }.directory-toolbar label:first-child { grid-column: 1 / -1; }.directory-toolbar .ui-button { width: 100%; } .directory-list { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .directory-shell { width: min(100% - 24px, 680px); padding-top: 20px; }.directory-card { padding: 15px; }.directory-toolbar { grid-template-columns: 1fr; }.directory-toolbar label:first-child { grid-column: auto; }.directory-player { grid-template-columns: auto minmax(0, 1fr); }.directory-player__meta { grid-column: 2; justify-content: start; } }