:root {
    --personal-ink: #050907;
    --personal-panel: rgba(8, 13, 10, .92);
    --personal-line: rgba(194, 204, 193, .18);
    --personal-muted: #879087;
    --personal-paper: #f1f3ee;
    --personal-gold: #cda94e;
    --personal-green: #68a66e;
    --personal-red: #ce5252;
}

body {
    background: var(--personal-ink);
    color: var(--personal-paper);
}

.personal-page {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(2, 7, 5, .45), #050907 38rem),
        url('/assets/images/hero-bg.jpg') center top / cover fixed no-repeat;
    font-family: "Noto Sans Thai", Arial, sans-serif;
}

.unit-directory {
    width: min(1240px, calc(100% - 48px));
    margin-inline: auto;
    padding: 1.2rem 0 3rem;
}

.unit-directory__meta {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--personal-line);
    color: #a8afa8;
    font: 700 .62rem/1.2 "Courier New", monospace;
    letter-spacing: .16em;
}

.unit-directory__meta span:last-child { color: var(--personal-green); }
.unit-directory__meta i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.unit-directory__intro {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    padding: 4rem 0 3.2rem;
}

.unit-directory__intro > p {
    grid-column: 1 / -1;
    margin: 0 0 .8rem;
    color: var(--personal-gold);
    font: 700 .66rem "Courier New", monospace;
    letter-spacing: .18em;
}

.unit-directory__intro h1 {
    margin: 0;
    color: var(--personal-paper);
    font: 800 clamp(3rem, 7vw, 6rem)/.78 Arial, sans-serif;
    letter-spacing: -.065em;
}

.unit-directory__intro h1 span {
    color: transparent;
    -webkit-text-stroke: 1px rgba(241, 243, 238, .52);
}

.unit-directory__intro > b {
    padding-bottom: .45rem;
    color: var(--personal-muted);
    font: 700 .6rem "Courier New", monospace;
    letter-spacing: .16em;
}

.unit-group + .unit-group { margin-top: 4.5rem; }
.unit-group__heading {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: end;
    gap: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--personal-line);
}

.unit-group__heading > span { color: var(--personal-gold); font: 400 2rem/1 "Courier New", monospace; }
.unit-group__heading p { margin: 0 0 .3rem; color: var(--personal-gold); font: 700 .6rem "Courier New", monospace; letter-spacing: .18em; }
.unit-group__heading h2 { margin: 0; font: 800 clamp(1.45rem, 3vw, 2.35rem)/1 Arial, sans-serif; letter-spacing: -.035em; }
.unit-group__heading > b { padding-bottom: .2rem; color: var(--personal-muted); font: 700 .6rem "Courier New", monospace; letter-spacing: .15em; }

.unit-grid {
    display: grid;
    gap: clamp(14px, 1.35vw, 20px);
    margin-top: clamp(14px, 1.35vw, 20px);
    padding: 0;
    background: transparent;
}

.unit-grid--ground { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.unit-grid--air { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.unit-card-shell {
    position: relative;
    min-width: 0;
    border: 1px solid transparent;
}
.unit-card-shell .unit-card { height: 100%; }
.unit-card-shell:has(.unit-card-join) .unit-card { padding-bottom: 4.45rem; }
.unit-card-shell:has(.unit-card-join) .unit-card__footer { bottom: 4rem; }
.unit-card-shell--current {
    border-color: rgba(205,169,78,.82);
    box-shadow: inset 0 0 0 1px rgba(205,169,78,.12), 0 0 28px rgba(205,169,78,.08);
}
.unit-card-shell--current .unit-card { border-color: transparent; }
.unit-card {
    position: relative;
    display: block;
    width: 100%;
    min-height: 230px;
    padding: 1.35rem;
    border: 1px solid var(--personal-line);
    overflow: hidden;
    background:
        linear-gradient(140deg, rgba(205,169,78,.055), transparent 55%),
        rgba(5, 10, 7, .96);
    color: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .22s ease, transform .22s ease;
    isolation: isolate;
}

.unit-card::before {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -70px;
    width: 170px;
    height: 170px;
    border: 1px solid rgba(205,169,78,.12);
    transform: rotate(45deg);
    z-index: 2;
    pointer-events: none;
}

.unit-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(3, 9, 6, .88) 0%, rgba(3, 9, 6, .58) 58%, rgba(3, 9, 6, .74) 100%),
        linear-gradient(0deg, rgba(2, 7, 4, .94) 0%, transparent 55%);
    pointer-events: none;
}

.unit-card__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #050a07;
}

.unit-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.38) saturate(.65) sepia(.12) brightness(.68) contrast(1.14);
    transform: scale(1.04);
    transition: filter .55s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}

.unit-card--air {
    min-height: 250px;
    background:
        linear-gradient(140deg, rgba(78,133,154,.1), transparent 58%),
        rgba(5, 10, 9, .96);
}

.unit-card__top,
.unit-card__footer { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 1rem; }
.unit-card__top { color: var(--personal-muted); font: 700 .56rem "Courier New", monospace; letter-spacing: .13em; }
.unit-card__top > span { color: var(--personal-gold); }
.unit-card > p { position: relative; z-index: 3; margin: 3.1rem 0 .55rem; color: var(--personal-gold); font: 700 .67rem "Courier New", monospace; letter-spacing: .16em; }
.unit-card h3 { position: relative; z-index: 3; max-width: 290px; margin: 0; color: var(--personal-paper); font: 800 clamp(1.4rem, 2.7vw, 2.2rem)/.95 Arial, sans-serif; letter-spacing: -.035em; text-shadow: 0 2px 18px rgba(0,0,0,.82); }
.unit-card__footer { position: absolute; right: 1.35rem; bottom: 1.25rem; left: 1.35rem; align-items: end; padding-top: .9rem; border-top: 1px solid var(--personal-line); color: var(--personal-muted); font: 700 .56rem/1.4 "Courier New", monospace; letter-spacing: .09em; text-transform: uppercase; }
.unit-card__footer i { color: rgba(205,169,78,.45); font-style: normal; font-size: .75rem; }
.unit-card:hover,
.unit-card:focus-visible { z-index: 2; background-color: rgba(205,169,78,.08); outline: 1px solid var(--personal-gold); outline-offset: -1px; }
.unit-card:hover .unit-card__media img,
.unit-card:focus-visible .unit-card__media img { filter: grayscale(.16) saturate(.85) sepia(.08) brightness(.82) contrast(1.12); transform: scale(1.1); }
.unit-card:hover .unit-card__footer i,
.unit-card:focus-visible .unit-card__footer i { color: var(--personal-gold); }

.unit-card-join {
    position: absolute;
    right: 1.35rem;
    bottom: 1rem;
    left: 1.35rem;
    z-index: 5;
}
.unit-card-join button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2.2rem;
    padding: 0 .8rem;
    border: 1px solid rgba(205,169,78,.52);
    background: rgba(4,9,6,.88);
    color: var(--personal-gold);
    font: 700 .58rem "Courier New", monospace;
    letter-spacing: .13em;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.unit-card-join button:hover,
.unit-card-join button:focus-visible {
    border-color: var(--personal-gold);
    background: var(--personal-gold);
    color: #071009;
    outline: none;
}
.unit-card-join button:disabled {
    border-color: rgba(98,190,118,.45);
    background: rgba(47,99,56,.2);
    color: #75cf87;
    cursor: default;
}
.unit-card-join i { font-style: normal; font-size: .9rem; }

.unit-join-console {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0 3rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--personal-line);
    border-left: 3px solid var(--personal-gold);
    background: linear-gradient(90deg, rgba(205,169,78,.075), rgba(4,11,7,.74) 42%, rgba(4,11,7,.92));
}
.unit-join-console__copy span,
.unit-join-console__state {
    color: var(--personal-gold);
    font: 700 .58rem "Courier New", monospace;
    letter-spacing: .15em;
}
.unit-join-console__copy strong {
    display: block;
    margin-top: .35rem;
    color: var(--personal-paper);
    font: 800 1.05rem Arial, sans-serif;
    letter-spacing: .035em;
}
.unit-join-console__copy p { margin: .35rem 0 0; color: var(--personal-muted); font-size: .78rem; }
.unit-join-console__state { display: flex; align-items: center; gap: .65rem; white-space: nowrap; }
.unit-join-console__state i { width: 7px; height: 7px; border-radius: 50%; background: #68c77a; box-shadow: 0 0 10px rgba(104,199,122,.8); }
.unit-join-alert { margin: -2rem 0 2.2rem; padding: .8rem 1rem; border: 1px solid var(--personal-line); font: 700 .67rem "Courier New", monospace; letter-spacing: .06em; }
.unit-join-alert--success { border-color: rgba(104,199,122,.45); color: #83d491; background: rgba(44,96,53,.16); }
.unit-join-alert--error { border-color: rgba(210,78,67,.46); color: #e9847b; background: rgba(115,35,29,.15); }

@media (prefers-reduced-motion: reduce) {
    .unit-card__media img { transition: none; transform: none; }
}

.personal-hero {
    position: relative;
    min-height: 34rem;
    overflow: hidden;
    border-bottom: 1px solid var(--personal-line);
}

.personal-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 7, 5, .98) 0%, rgba(2, 7, 5, .78) 48%, rgba(2, 7, 5, .42) 100%);
}

.personal-grid {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: linear-gradient(var(--personal-line) 1px, transparent 1px), linear-gradient(90deg, var(--personal-line) 1px, transparent 1px);
    background-size: 72px 72px;
}

.personal-hero__inner,
.personal-directory {
    width: min(1240px, calc(100% - 48px));
    margin-inline: auto;
}

.personal-hero__inner {
    position: relative;
    z-index: 1;
    min-height: 34rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-rows: auto 1fr auto;
    gap: 0 5rem;
}

.personal-kicker {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--personal-line);
    color: #a8afa8;
    font: 700 .66rem/1.2 "Courier New", monospace;
    letter-spacing: .16em;
}

.personal-kicker__status { color: var(--personal-green); }
.personal-kicker__status i,
.personal-card__status i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.personal-hero__copy { align-self: center; padding: 4rem 0; }
.personal-overline {
    margin: 0 0 1rem;
    color: var(--personal-gold);
    font: 700 .7rem/1.2 "Courier New", monospace;
    letter-spacing: .22em;
}

.personal-hero h1 {
    max-width: 760px;
    margin: 0;
    color: var(--personal-paper);
    font: 800 clamp(4.4rem, 10vw, 8.4rem)/.77 Arial, sans-serif;
    letter-spacing: -.07em;
}

.personal-hero h1 span {
    color: transparent;
    -webkit-text-stroke: 1px rgba(241, 243, 238, .58);
}

.personal-lead {
    max-width: 600px;
    margin: 2.2rem 0 0;
    color: #aab1aa;
    font-size: .95rem;
    line-height: 1.8;
}

.personal-stats {
    align-self: center;
    margin: 0;
    border-top: 1px solid var(--personal-line);
}

.personal-stats div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--personal-line);
}

.personal-stats dt,
.personal-stats dd { margin: 0; }
.personal-stats dt { color: var(--personal-muted); font: 700 .62rem "Courier New", monospace; letter-spacing: .16em; }
.personal-stats dd { color: var(--personal-paper); font: 700 1.6rem Arial, sans-serif; }

.personal-directory { padding: 1rem 0 8rem; }
.personal-directory__toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    align-items: end;
    gap: 1.25rem;
    padding: 1.2rem;
    border: 1px solid var(--personal-line);
    background: rgba(5, 9, 7, .84);
    backdrop-filter: blur(18px);
}

.personal-search span {
    display: block;
    margin-bottom: .55rem;
    color: var(--personal-muted);
    font: 700 .6rem "Courier New", monospace;
    letter-spacing: .16em;
}

.personal-search input {
    width: 100%;
    height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--personal-line);
    border-radius: 0;
    outline: none;
    background: rgba(255, 255, 255, .025);
    color: var(--personal-paper);
    font: 700 .72rem "Courier New", monospace;
    letter-spacing: .1em;
}

.personal-search input:focus { border-color: var(--personal-gold); }
.personal-filters { display: flex; }
.personal-filters button {
    height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--personal-line);
    border-right: 0;
    background: transparent;
    color: var(--personal-muted);
    cursor: pointer;
    font: 700 .65rem "Courier New", monospace;
    letter-spacing: .12em;
}
.personal-filters button:last-child { border-right: 1px solid var(--personal-line); }
.personal-filters button:hover,
.personal-filters button.is-active { background: var(--personal-gold); color: #090a08; border-color: var(--personal-gold); }
.personal-result { margin: 0 0 .8rem; color: var(--personal-muted); font: 700 .62rem "Courier New", monospace; letter-spacing: .12em; }
.personal-result strong { color: var(--personal-paper); }

.personal-tier { margin-top: 5rem; }
.personal-tier[hidden] { display: none; }
.personal-tier__header {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: end;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--personal-line);
}
.personal-tier__header > span { color: var(--personal-gold); font: 400 2rem/1 "Courier New", monospace; }
.personal-tier__header p { margin: 0 0 .3rem; color: var(--personal-gold); font: 700 .6rem "Courier New", monospace; letter-spacing: .18em; }
.personal-tier__header h2 { margin: 0; font: 800 clamp(1.45rem, 3vw, 2.35rem)/1 Arial, sans-serif; letter-spacing: -.035em; }
.personal-tier__header b { padding-bottom: .2rem; color: var(--personal-muted); font: 700 .6rem "Courier New", monospace; letter-spacing: .15em; }

.personal-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--personal-line);
    border: 1px solid var(--personal-line);
}
.personal-card { min-width: 0; background: var(--personal-ink); }
.personal-card[hidden] { display: none; }
.personal-card__open { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.personal-card__image { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #111712; }
.personal-card__image > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.62) contrast(1.06); transition: transform .7s cubic-bezier(.2,.75,.2,1), filter .4s ease; }
.personal-card__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(2, 5, 3, .9)); }
.personal-card__scan { position: absolute; z-index: 1; inset: 0; opacity: .22; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.055) 3px 4px); }
.personal-card__status { position: absolute; z-index: 2; top: .9rem; left: .9rem; padding: .52rem .65rem; background: rgba(5,9,7,.82); color: var(--personal-green); font: 700 .55rem "Courier New", monospace; letter-spacing: .1em; }
.personal-card__status--loa { color: var(--personal-gold); }
.personal-card__inspect { position: absolute; z-index: 2; right: .9rem; bottom: .9rem; left: .9rem; display: flex; justify-content: space-between; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.72); font: 700 .55rem "Courier New", monospace; letter-spacing: .12em; transform: translateY(8px); opacity: 0; transition: .3s ease; }
.personal-card__open:hover .personal-card__image > img,
.personal-card__open:focus-visible .personal-card__image > img { transform: scale(1.045); filter: saturate(.9) contrast(1.02); }
.personal-card__open:hover .personal-card__inspect,
.personal-card__open:focus-visible .personal-card__inspect { transform: translateY(0); opacity: 1; }
.personal-card__open:focus-visible { outline: 1px solid var(--personal-gold); outline-offset: -1px; }
.personal-card__body { display: block; min-height: 142px; padding: 1.25rem; background: var(--personal-panel); }
.personal-card__meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--personal-gold); font: 700 .58rem "Courier New", monospace; letter-spacing: .12em; }
.personal-card__meta em { color: #667067; font-style: normal; }
.personal-card__body > strong { display: block; margin-top: 1rem; color: var(--personal-paper); font: 800 1.28rem/1.1 Arial, sans-serif; letter-spacing: -.02em; }
.personal-card__body > small { display: block; margin-top: .55rem; color: var(--personal-muted); font: 700 .62rem/1.4 "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.personal-tier__empty { grid-column: 1 / -1; margin: 0; padding: 2.5rem; background: var(--personal-ink); color: var(--personal-muted); text-align: center; font: 700 .65rem "Courier New", monospace; letter-spacing: .14em; }
.personal-no-results,
.personal-system-message { margin-top: 2rem; padding: 3rem; border: 1px solid var(--personal-line); color: var(--personal-muted); text-align: center; font: 700 .7rem "Courier New", monospace; letter-spacing: .14em; }

.unit-roster-modal[hidden],
.personal-modal[hidden] { display: none; }
.unit-roster-modal { position: fixed; z-index: 9000; inset: 0; padding: 1.5rem; }
.unit-roster-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 3, 2, .9); backdrop-filter: blur(12px); }
.unit-roster-shell {
    position: relative;
    z-index: 1;
    width: min(1240px, 100%);
    height: calc(100vh - 3rem);
    margin-inline: auto;
    overflow: auto;
    border: 1px solid rgba(205,169,78,.5);
    background: #060a07;
    box-shadow: 0 30px 100px #000;
}
.unit-roster-shell__close {
    position: sticky;
    z-index: 5;
    top: 0;
    float: right;
    width: 52px;
    height: 52px;
    border: 0;
    border-left: 1px solid var(--personal-line);
    border-bottom: 1px solid var(--personal-line);
    background: #070b08;
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
}
.unit-roster-shell__close:hover { background: var(--personal-gold); color: #050705; }
.unit-roster-panel[hidden] { display: none; }
.unit-roster-panel { min-height: 100%; padding: 0 2.4rem 4rem; }
.unit-roster-panel__header {
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: end;
    gap: 3rem;
    padding: 4rem 0 2rem;
    border-bottom: 1px solid var(--personal-line);
}
.unit-roster-panel__header p { margin: 0 0 .8rem; color: var(--personal-gold); font: 700 .62rem "Courier New", monospace; letter-spacing: .17em; }
.unit-roster-panel__header h2 { margin: 0; font: 800 clamp(2.5rem, 6vw, 5.2rem)/.9 Arial, sans-serif; letter-spacing: -.055em; }
.unit-roster-panel__header h2 span { display: block; color: transparent; -webkit-text-stroke: 1px rgba(241,243,238,.52); }
.unit-roster-panel__header dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--personal-line); }
.unit-roster-panel__header dl div { padding: 1rem 0; border-bottom: 1px solid var(--personal-line); }
.unit-roster-panel__header dt { color: var(--personal-muted); font: 700 .56rem "Courier New", monospace; letter-spacing: .12em; }
.unit-roster-panel__header dd { margin: .4rem 0 0; font: 800 1.55rem Arial, sans-serif; }
.unit-roster-tier { margin-top: 3.5rem; }
.unit-roster-tier__heading { display: grid; grid-template-columns: 1fr auto; align-items: end; padding-bottom: 1rem; border-bottom: 1px solid var(--personal-line); }
.unit-roster-tier__heading p { grid-column: 1 / -1; margin: 0 0 .3rem; color: var(--personal-gold); font: 700 .58rem "Courier New", monospace; letter-spacing: .16em; }
.unit-roster-tier__heading h3 { margin: 0; font: 800 1.8rem/1 Arial, sans-serif; letter-spacing: -.03em; }
.unit-roster-tier__heading b { color: var(--personal-muted); font: 700 .58rem "Courier New", monospace; letter-spacing: .12em; }
.unit-member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 280px)); gap: 1rem; margin-top: 1rem; }
.unit-member-card { min-width: 0; border: 1px solid var(--personal-line); background: #070b08; }
.unit-member-card button,
.unit-member-card__static { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.unit-member-card button { cursor: pointer; }
.unit-member-card__photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #111712; }
.unit-member-card__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(2,5,3,.88)); }
.unit-member-card__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.58) contrast(1.05); transition: transform .45s ease, filter .3s ease; }
.unit-member-card__photo i { position: absolute; z-index: 1; right: .85rem; bottom: .75rem; left: .85rem; color: rgba(255,255,255,.72); font: normal 700 .52rem "Courier New", monospace; letter-spacing: .1em; }
.unit-member-card__info { display: block; min-height: 126px; padding: 1rem; }
.unit-member-card__info small { display: block; color: var(--personal-gold); font: 700 .57rem "Courier New", monospace; letter-spacing: .12em; }
.unit-member-card__info strong { display: block; margin-top: .7rem; font: 800 1.1rem/1.05 Arial, sans-serif; }
.unit-member-card__info em { display: block; margin-top: .5rem; color: var(--personal-muted); font: normal 700 .55rem/1.35 "Courier New", monospace; letter-spacing: .05em; text-transform: uppercase; }
.unit-member-card button:hover .unit-member-card__photo img,
.unit-member-card button:focus-visible .unit-member-card__photo img { transform: scale(1.04); filter: saturate(.85); }
.unit-member-card button:focus-visible { outline: 1px solid var(--personal-gold); outline-offset: -1px; }
.unit-roster-empty { display: grid; place-items: center; min-height: 340px; margin-top: 2rem; border: 1px solid var(--personal-line); text-align: center; }
.unit-roster-empty span { color: var(--personal-gold); font: 700 .7rem "Courier New", monospace; letter-spacing: .16em; }
.unit-roster-empty p { max-width: 430px; margin: .8rem auto 0; color: var(--personal-muted); font-size: .85rem; }
.personal-modal { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: 2rem; }
.personal-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 3, 2, .88); backdrop-filter: blur(12px); }
.personal-dossier { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(360px, 1fr); width: min(930px, 100%); max-height: min(720px, calc(100vh - 4rem)); overflow: auto; border: 1px solid rgba(205,169,78,.55); background: #070b08; box-shadow: 0 30px 100px #000; }
.personal-dossier__close { position: absolute; z-index: 3; top: 0; right: 0; width: 48px; height: 48px; border: 0; border-left: 1px solid var(--personal-line); border-bottom: 1px solid var(--personal-line); background: #070b08; color: white; cursor: pointer; font-size: 1.5rem; }
.personal-dossier__close:hover { background: var(--personal-gold); color: #050705; }
.personal-dossier__visual { position: relative; min-height: 580px; overflow: hidden; }
.personal-dossier__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(3,7,4,.94)); }
.personal-dossier__visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.66); }
.personal-dossier__visual span { position: absolute; z-index: 1; bottom: 1.5rem; left: 1.5rem; color: #fff; font: 700 .58rem "Courier New", monospace; letter-spacing: .16em; }
.personal-dossier__content { align-self: center; padding: 4rem; }
.personal-dossier__content h2 { margin: 0; color: var(--personal-paper); font: 800 clamp(2.3rem, 5vw, 4rem)/.95 Arial, sans-serif; letter-spacing: -.05em; }
.personal-dossier__role { margin: 1rem 0 2.5rem; color: var(--personal-muted); font: 700 .7rem "Courier New", monospace; letter-spacing: .14em; text-transform: uppercase; }
.personal-dossier dl { margin: 0; border-top: 1px solid var(--personal-line); }
.personal-dossier dl div { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--personal-line); }
.personal-dossier dt { color: var(--personal-muted); font: 700 .58rem "Courier New", monospace; letter-spacing: .12em; }
.personal-dossier dd { margin: 0; color: var(--personal-paper); font: 700 .7rem "Courier New", monospace; text-align: right; }
.personal-dossier__profile { display: inline-block; margin-top: 2rem; padding: .9rem 1.1rem; border: 1px solid var(--personal-gold); color: var(--personal-gold); text-decoration: none; font: 700 .62rem "Courier New", monospace; letter-spacing: .12em; }
.personal-dossier__profile:hover { background: var(--personal-gold); color: #050705; }
body.personal-modal-open,
body.unit-modal-open { overflow: hidden; }

body > footer { border-top: 1px solid var(--personal-line); background: #030604; }

@media (max-width: 980px) {
    .unit-grid--ground,
    .unit-grid--air { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .personal-hero__inner { grid-template-columns: 1fr 240px; gap: 2rem; }
    .personal-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .unit-member-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .unit-roster-panel__header { grid-template-columns: 1fr 220px; }
    .personal-directory__toolbar { grid-template-columns: 1fr auto; }
    .personal-result { display: none; }
}

@media (max-width: 720px) {
    .unit-join-console { grid-template-columns: 1fr; gap: .9rem; }
    .unit-join-console__state { white-space: normal; }
    .unit-directory { width: min(100% - 28px, 1240px); }
    .unit-directory__intro { display: block; padding: 3.2rem 0 2.4rem; }
    .unit-directory__intro > b { display: block; margin-top: 1.6rem; }
    .unit-group__heading { grid-template-columns: 42px 1fr; }
    .unit-group__heading > b { display: none; }
    .unit-roster-modal { padding: .55rem; }
    .unit-roster-shell { height: calc(100vh - 1.1rem); }
    .unit-roster-panel { padding: 0 1rem 2rem; }
    .unit-roster-panel__header { display: block; padding-top: 4rem; }
    .unit-roster-panel__header dl { margin-top: 1.5rem; }
    .unit-member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .personal-hero__inner,
    .personal-directory { width: min(100% - 28px, 1240px); }
    .personal-hero,
    .personal-hero__inner { min-height: 31rem; }
    .personal-hero__inner { display: block; }
    .personal-kicker { margin-bottom: 4.5rem; }
    .personal-kicker > span:first-child { max-width: 180px; }
    .personal-hero__copy { padding: 0; }
    .personal-hero h1 { font-size: clamp(3.5rem, 19vw, 5.7rem); }
    .personal-lead { margin-top: 1.6rem; }
    .personal-stats { display: none; }
    .personal-directory { padding-top: 1.25rem; }
    .personal-directory__toolbar { grid-template-columns: 1fr; align-items: stretch; padding: .8rem; }
    .personal-filters button { flex: 1; }
    .personal-tier { margin-top: 3.4rem; }
    .personal-tier__header { grid-template-columns: 42px 1fr; }
    .personal-tier__header b { display: none; }
    .personal-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .personal-card__body { min-height: 126px; padding: 1rem; }
    .personal-card__body > strong { font-size: 1rem; }
    .personal-card__meta em { display: none; }
    .personal-dossier { grid-template-columns: 1fr; max-height: calc(100vh - 2rem); }
    .personal-dossier__visual { min-height: 280px; max-height: 42vh; }
    .personal-dossier__content { padding: 2rem 1.4rem; }
}

@media (max-width: 430px) {
    .unit-grid--ground,
    .unit-grid--air { grid-template-columns: 1fr; }
    .unit-card,
    .unit-card--air { min-height: 220px; }
    .unit-member-grid { grid-template-columns: 1fr; }
    .unit-member-card__photo { aspect-ratio: 16 / 9; }
    .personal-cards { grid-template-columns: 1fr; }
    .personal-card__image { aspect-ratio: 5 / 4; }
}

@media (min-width: 1920px) {
    .unit-directory,
    .personal-hero__inner,
    .personal-directory {
        width: min(1680px, calc(100% - 128px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .personal-card__image > img,
    .personal-card__inspect { transition: none; }
}