:root{--dir-line:rgba(255,255,255,.16);--dir-dim:#90928d;--dir-panel:rgba(7,7,7,.82);--dir-cyan:#27dfff;--dir-green:#2dff88}
body{background:#000;color:#f8f8f6}.directory-page{position:relative;z-index:1;min-height:100vh}.nav{position:sticky;top:0;z-index:10;background:rgba(0,0,0,.78)}.nav-context{font-size:10px;color:var(--dir-dim);letter-spacing:.13em;text-transform:uppercase}
main{padding:0 clamp(20px,4vw,64px) 80px}.directory-hero{min-height:430px;padding:clamp(64px,9vw,120px) 0 56px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);gap:48px;align-items:end;border-bottom:1px solid #fff}.directory-hero h1{margin-top:20px;font-size:clamp(64px,10vw,150px);line-height:.78;letter-spacing:-.075em;font-weight:500}.hero-meta{display:grid;gap:28px;align-content:end}.hero-meta p{font-size:clamp(15px,1.4vw,20px);line-height:1.5;color:#bbb}.hero-meta strong{font-size:clamp(25px,3vw,42px);letter-spacing:-.04em}.live-state{display:flex;align-items:center;gap:10px;color:var(--dir-dim);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.live-dot{width:7px;height:7px;border-radius:50%;background:#ffe600;box-shadow:0 0 14px #ffe600}.live-dot.ready{background:var(--dir-green);box-shadow:0 0 14px var(--dir-green)}.live-dot.error{background:#ff3158;box-shadow:0 0 14px #ff3158}
.directory-controls{display:grid;grid-template-columns:2fr 1fr 1fr 120px;border-bottom:1px solid var(--dir-line)}.directory-controls label{display:grid;gap:10px;padding:20px;border-right:1px solid var(--dir-line)}.directory-controls label:first-child{padding-left:0}.directory-controls label:last-child{border-right:0}.directory-controls span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dir-dim)}input,select{width:100%;border:0;border-bottom:1px solid #555;border-radius:0;background:#000;color:#fff;padding:8px 0;outline:0}input:focus,select:focus{border-color:var(--dir-cyan)}
.alphabet{display:flex;flex-wrap:wrap;gap:4px;padding:18px 0;border-bottom:1px solid var(--dir-line)}.alphabet button,.result-line button,.pager button{border:1px solid var(--dir-line);background:transparent;color:#fff;cursor:pointer}.alphabet button{width:34px;height:32px;font-size:10px}.alphabet button:hover,.alphabet button.active{background:#fff;color:#000}.result-line{display:flex;justify-content:space-between;align-items:center;padding:22px 0;color:var(--dir-dim);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.result-line button{padding:9px 12px;font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.company-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--dir-line);border-left:1px solid var(--dir-line)}.company-card{position:relative;min-height:270px;padding:22px;border:0;border-right:1px solid var(--dir-line);border-bottom:1px solid var(--dir-line);background:var(--dir-panel);color:#fff;text-align:left;cursor:pointer;display:flex;flex-direction:column;transition:background .2s,transform .2s}.company-card:hover{z-index:1;background:linear-gradient(135deg,rgba(255,49,88,.88),rgba(114,92,255,.88),rgba(39,223,255,.8));transform:translateY(-3px)}.card-top,.card-bottom{display:flex;justify-content:space-between;gap:14px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#aaa}.company-card h2{margin:auto 0 14px;font-size:clamp(24px,2.2vw,36px);line-height:1;letter-spacing:-.045em;font-weight:500}.company-card p{font-size:12px;line-height:1.45;color:#aaa}.company-card:hover p,.company-card:hover .card-top,.company-card:hover .card-bottom{color:#fff}.card-bottom{padding-top:18px}.empty{grid-column:1/-1;padding:80px 20px;text-align:center;color:var(--dir-dim)}
.pager{display:flex;align-items:center;justify-content:center;gap:24px;padding:34px 0}.pager button{min-width:112px;padding:12px}.pager button:disabled{opacity:.28;cursor:not-allowed}.pager span{font-size:10px;letter-spacing:.12em;text-transform:uppercase}.directory-footer{display:flex;justify-content:space-between;padding:28px clamp(20px,4vw,64px);border-top:1px solid var(--dir-line);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dir-dim)}
dialog{width:min(880px,calc(100vw - 32px));max-height:calc(100vh - 32px);margin:auto;padding:clamp(28px,5vw,64px);border:1px solid #555;background:rgba(0,0,0,.97);color:#fff;box-shadow:0 0 80px rgba(39,223,255,.14)}dialog::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:22px;top:18px;border:0;background:transparent;color:#fff;font-size:34px;cursor:pointer}.dialog-code,.dialog-status{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dir-cyan)}dialog h2{max-width:720px;margin:24px 0 12px;font-size:clamp(38px,6vw,76px);line-height:.9;letter-spacing:-.06em;font-weight:500}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:42px;border-top:1px solid var(--dir-line);border-left:1px solid var(--dir-line)}.detail-item{padding:18px;border-right:1px solid var(--dir-line);border-bottom:1px solid var(--dir-line);overflow-wrap:anywhere}.detail-item dt{margin-bottom:8px;color:var(--dir-dim);font-size:9px;letter-spacing:.12em;text-transform:uppercase}.detail-item dd{font-size:14px;line-height:1.5}.detail-item a{color:var(--dir-cyan)}
@media(max-width:900px){.company-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.directory-controls{grid-template-columns:1fr 1fr}.directory-controls label:first-child{padding-left:20px}}
@media(max-width:680px){.nav-context{display:none}.directory-hero{min-height:360px;grid-template-columns:1fr}.directory-hero h1{font-size:clamp(60px,20vw,96px)}.directory-controls,.company-grid,.detail-grid{grid-template-columns:1fr}.directory-controls label{border-right:0}.company-card{min-height:230px}.directory-footer{gap:16px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.company-card{transition:none}}