:root{
  --black:#000;
  --black2:#050505;
  --gold:#d6b72a;
  --gold2:#ffe66d;
  --gold3:#8f7414;
  --white:#f4f4f4;
  --muted:#b9b9b9;
  --dim:#7d7d7d;
  --red:#c0392b;
  --blue:#11192b;
  --line:rgba(255,255,255,.92);
}
*{box-sizing:border-box}
html{background:var(--black)}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 10% 0%,rgba(214,183,42,.08),transparent 22rem),
    radial-gradient(circle at 92% 8%,rgba(18,36,68,.26),transparent 20rem),
    var(--black);
  color:var(--white);
  font-family:Inter,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{
  width:min(920px,calc(100% - 64px));
  margin:0 auto;
}
.lspd-header{
  padding:30px 0 24px;
  border-bottom:2px solid var(--line);
  background:#000;
}
.brand-row{
  display:flex;
  align-items:center;
  gap:18px;
}
.title-block{flex:1;min-width:0}
.crest{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%);
  background:linear-gradient(180deg,#17233d,#060a12);
  border:2px solid var(--gold);
  color:var(--gold2);
  font-weight:950;
  font-size:13px;
  letter-spacing:0;
  box-shadow:0 0 0 1px rgba(214,183,42,.24),0 0 24px rgba(214,183,42,.16);
}
.crest.small{
  width:58px;
  height:58px;
  border-radius:50%;
  clip-path:none;
  font-size:10px;
  text-transform:uppercase;
}
.title-block h1{
  margin:0;
  color:var(--white);
  font-family:Impact,"Arial Black",Inter,sans-serif;
  font-size:36px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
  line-height:1.02;
}
.sub{
  margin-top:6px;
  color:var(--white);
  font-family:monospace;
  font-size:13px;
  font-weight:900;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:20px;
  color:var(--white);
  font-family:monospace;
  font-size:13px;
  font-weight:800;
}
.meta b{color:var(--white)}
.panel{
  margin:28px 0 26px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:3px;
  background:#000;
}
.eyebrow{
  margin-bottom:18px;
  color:var(--white);
  font-family:monospace;
  font-size:11px;
  font-weight:900;
  letter-spacing:.42em;
  text-transform:uppercase;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.full{grid-column:1/-1}
label{
  display:grid;
  gap:7px;
  color:var(--white);
  font-family:monospace;
  font-size:11px;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
}
input,select{
  width:100%;
  height:54px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:0;
  background:#000;
  color:var(--white);
  font-size:17px;
}
input::placeholder{color:#8d8d8d}
input:focus,select:focus{
  outline:1px solid var(--gold2);
  border-color:var(--gold2);
}
.select-menu{
  position:relative;
  width:100%;
}
.select-menu summary{
  height:58px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  border:1px solid var(--gold2);
  background:#000;
  color:var(--gold2);
  font-family:Impact,"Arial Black",Inter,sans-serif;
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  list-style:none;
}
.select-menu summary::-webkit-details-marker{display:none}
.select-menu summary b{display:none}
.select-menu[open] summary{
  background:rgba(214,183,42,.09);
}
.select-panel{
  position:absolute;
  z-index:20;
  top:calc(100% + 8px);
  left:0;
  right:0;
  max-height:370px;
  overflow:auto;
  padding:14px;
  border:1px solid var(--gold2);
  background:#020202;
  box-shadow:0 28px 80px rgba(0,0,0,.75);
}
.cat-label{
  margin:13px 0 8px;
  color:var(--gold2);
  font-family:monospace;
  font-size:11px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.38);
  background:#000;
  color:var(--muted);
  font-family:monospace;
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
}
.chip input{
  width:auto;
  height:auto;
  accent-color:var(--gold2);
}
.chip:has(input:checked){
  border-color:var(--gold2);
  background:rgba(214,183,42,.14);
  color:var(--gold2);
}
.chip.warn:has(input:checked){
  border-color:var(--red);
  color:#f1a099;
  background:rgba(192,57,43,.17);
}
.selected-line{
  min-height:31px;
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.selected-line span,
.selected-line em{
  font-family:monospace;
  font-size:13px;
  font-style:normal;
}
.selected-line span{
  padding:3px 7px;
  border:1px solid rgba(214,183,42,.38);
  color:var(--gold2);
  background:rgba(214,183,42,.08);
}
.selected-line em{color:var(--white)}
.actions{
  display:grid;
  gap:18px;
  margin-top:10px;
}
.btn-gold,.btn-ghost{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--gold2);
  background:#000;
  color:var(--gold2);
  font-family:Impact,"Arial Black",Inter,sans-serif;
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.btn-gold{
  border-color:transparent;
  color:var(--gold2);
}
.btn-gold:hover,.btn-ghost:hover,.select-menu summary:hover{
  background:rgba(214,183,42,.1);
}
.roster-section{padding-bottom:50px}
.empty{
  padding:28px;
  border:1px dashed rgba(255,255,255,.35);
  color:var(--white);
  text-align:center;
}
.person-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  padding:11px;
  border-left:3px solid var(--gold2);
  background:linear-gradient(90deg,#121212,#050505);
  border-radius:2px;
}
.person-row.swatt{border-left-color:var(--red)}
.led{
  width:9px;
  height:9px;
  border-radius:50%;
  box-shadow:0 0 8px currentColor;
}
.person-main{
  flex:1;
  min-width:0;
}
.person-main strong{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:4px;
}
.tag{
  font-family:monospace;
  font-size:10px;
  color:var(--gold2);
  border:1px solid rgba(214,183,42,.38);
  padding:2px 5px;
}
.tag.rank{
  color:var(--white);
  border-color:rgba(255,255,255,.32);
}
.tag.warn{
  color:#e88a7d;
  border-color:rgba(192,57,43,.45);
}
.num{
  font-family:monospace;
  color:var(--gold2);
  border:1px solid rgba(214,183,42,.38);
  padding:3px 7px;
}
.row-btn{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:18px;
  padding:4px 7px;
  cursor:pointer;
}
.row-btn:hover{color:var(--gold2)}
@media(max-width:700px){
  .wrap{width:min(100% - 28px,920px)}
  .brand-row{gap:12px}
  .crest{width:58px;height:58px}
  .crest.small{width:48px;height:48px}
  .title-block h1{font-size:24px}
  .sub{font-size:10px}
  .meta{font-size:11px}
  .form-grid{grid-template-columns:1fr}
  .panel{padding:16px}
  .select-menu summary,.btn-gold,.btn-ghost{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
