:root{
  --bg: #061118;
  --panel: rgba( 16, 24, 32, 0.92 );
  --stroke: rgba( 120, 170, 220, 0.22 );
  --stroke2: rgba( 220, 240, 255, 0.12 );

  --accent: rgba( 120, 190, 255, 0.9 );

  --text: rgba( 255, 255, 255, 0.92 );
  --muted: rgba( 203, 244, 249, 0.62 );

  --label: rgba( 203, 244, 249, 0.78 );
  --tabInactive: rgba( 203, 244, 249, 0.76 );

  --radius: 10px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --headH: 44px;
}

[ hidden ]{ display:none !important; }

.visibility-hidden{ visibility: hidden; }

*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: var( --font );
  color: var( --text );
  background: radial-gradient( 1200px 800px at 20% 10%, rgba( 90,140,220,0.18 ), transparent 60% ),
              radial-gradient( 900px 600px at 80% 20%, rgba( 80,220,200,0.10 ), transparent 55% ),
              var( --bg );
  overflow: hidden;
}

.frame{ height: 100%; display:flex; flex-direction:column; min-height:0; }
.content{ flex:1; padding: 12px; min-height:0; display:flex; }

.panel{
  background: var( --panel );
  border: 1px solid var( --stroke );
  border-radius: var( --radius );
  box-shadow: 0 0 0 1px rgba( 255,255,255,0.05 ) inset;
  display:flex;
  flex-direction:column;
  min-height:0;
  width: 100%;
}

.list-header{
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: rgba( 16,24,32,0.92 );
  border-top-left-radius: var( --radius );
  border-top-right-radius: var( --radius );
  align-items: stretch;
}

.brand{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo{
  height: 60px;
  width: auto;
  object-fit: contain;
}

.list-nav{
  display: flex;
  gap: 12px;
  padding: 0 12px 0 12px;
  background: rgba( 16,24,32,0.92 );
  align-items: flex-end;
  justify-content: space-between;
}

.nav-controls{
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding-bottom: 10px;
  margin-left: auto;
}

.desc-controls{
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
  align-items: flex-start;
}

.level-control{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}
.level-control-inner{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 180px;
}
.level-label{
  color: var( --label );
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.level-slider{
  flex: 1;
  min-width: 80px;
  max-width: 150px;
  height: 6px;
  border-radius: 3px;
  background: rgba( 120, 170, 220, 0.18 );
  outline: none;
  -webkit-appearance: none;
}
.level-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var( --accent );
  cursor: pointer;
}
.level-slider::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var( --accent );
  cursor: pointer;
  border: none;
}
.level-display{
  color: var( --text );
  font-weight: 600;
  font-size: 13px;
  min-width: 20px;
  text-align: center;
}

.tabstrip{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin-bottom: -1px;
}
.tab{
  border: 1px solid var( --stroke );
  background: rgba( 0,0,0,0.10 );
  color: var( --tabInactive );
  padding: 10px 14px;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  line-height: 1;
  font-size: 15px;
  font-weight: 500;
}
.tab:hover{ background: rgba( 120,190,255,0.08 ); color: var( --text ); }
.tab.active{
  color: var( --text );
  background: rgba( 12,18,26,1 );
  border-color: var( --stroke2 );
  border-bottom-color: transparent;
  position: relative;
  margin-bottom: -1px;
  z-index: 12;
}

.desc{
  flex: 1;
  border: 1px solid var( --stroke2 );
  background: rgba( 12,18,26,1 );
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.desc-content{
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.desc-title{
  color: var( --label );
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
  padding-bottom: 4px;
  flex-shrink: 0;
}

.desc-body{
  font-size: 13px;
  line-height: 1.4;
  color: var( --text );
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.data-area{
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Ensure backgrounds extend through full scrollable width */
.data-area > .filter-row,
.data-area > .list-head,
.data-area > .rows{
  min-width: var( --grid-width, 0 );
}

/* Dynamic grid columns from JS */
.list-head, .row{
  display: grid;
  grid-template-columns: var( --cols, 220px 160px 1fr );
  gap: 8px;
}
.col{ min-width: 0; }
.col.col-centered{ text-align: center; }

.filter-row{
  border-top: 1px solid var( --stroke2 );
  background: rgba( 12,18,26,1 );
  position: sticky;
  top: 0;
  z-index: 10;
  display: none;
}

.filter-row.visible{
  display: flex;
}

/* Grid layout for filters when aligned with columns (e.g., pilots) */
.filter-row.grid-aligned.visible{
  padding: 10px 12px 8px 12px;
  display: grid;
  grid-template-columns: var( --cols, 220px 160px 1fr );
  gap: 8px;
}

.filter-row.grid-aligned .filter-header{
  border: none;
  padding: 0;
}

.filter-row.grid-aligned .filter-content{
  display: contents;
  padding: 0;
}

.filter-row.grid-aligned .filter-content.collapsed{
  display: none;
}

.filter-row.grid-aligned .filter-content > *{
  /* Each filter child takes its grid position naturally */
}

/* Horizontal layout for non-aligned filters */
.filter-row.horizontal.visible{
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 10px 12px 8px 12px;
  align-items: flex-start;
}

.filter-row.horizontal .filter-header{
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.filter-row.horizontal .filter-content{
  flex: 1;
  padding: 0;
  margin-left: 12px;
}

.filter-header{
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 12px;
  border-bottom: 1px solid var( --stroke2 );
  background: rgba( 12,18,26,1 );
}

.filter-header-buttons{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.filter-selection{
  min-width: 180px;
  max-width: 220px;
}

.filter-title-btn{
  appearance: none;
  border: none;
  background: transparent;
  color: var( --label );
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 6px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  font-weight: normal;
}
.filter-title-btn:hover{ background: rgba( 120,190,255,0.08 ); color: var( --text ); }

.filter-collapse-icon{
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid rgba( 235,245,255,0.35 );
  transition: transform 0.2s;
}
.filter-title-btn.collapsed .filter-collapse-icon{
  transform: rotate( -90deg );
}

.filter-content{
  display: flex;
  gap: 8px;
  padding: 10px 12px 8px 12px;
  overflow-x: auto;
  align-items: flex-start;
}
.filter-content.collapsed{
  display: none;
}

.filter-box{
  display: flex;
  flex-direction: column;
  min-width: 180px;
  max-width: 220px;
  background: rgba( 0,0,0,0.42 );
  border: 1px solid var( --stroke );
  border-radius: 10px;
  overflow: hidden;
}

.filter-box-title{
  color: var( --label );
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 8px;
  background: rgba( 0,0,0,0.3 );
  border-bottom: 1px solid var( --stroke );
  position: sticky;
  top: 0;
  z-index: 1;
}

.filter-box select{
  border: none;
  background: transparent;
  color: var( --text );
  height: auto;
  padding: 6px;
  width: 100%;
}

.filter-box select option{
  background: rgba( 0,0,0,0.3 );
}

.filter-box select option:nth-child( odd ){
  background: rgba( 80,220,200,0.05 );
}

.filter-box select option:nth-child( even ){
  background: rgba( 0,0,0,0.3 );
}

.filter-box select option:checked:nth-child( odd ),
.filter-box select option[selected]:nth-child( odd ){
  background: rgba( 200,80,0,0.5 ) !important;
  color: var( --text );
}

.filter-box select option:checked:nth-child( even ),
.filter-box select option[selected]:nth-child( even ){
  background: rgba( 200,80,0,0.35 ) !important;
  color: var( --text );
}

.list-head{
  padding: 6px 12px;
  border-top: 1px solid var( --stroke2 );
  border-bottom: 1px solid var( --stroke2 );
  background: rgba( 12,18,26,1 );
  position: sticky;
  top: var( --filter-height, 120px );
  z-index: 9;
  display: grid;
  grid-template-columns: var( --cols, 220px 160px 1fr );
  gap: 8px;
}

.head-btn{
  appearance:none;
  border:none;
  background: transparent;
  color: var( --label );
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 6px;
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 6px;
  border-radius: 8px;
}
.head-btn:hover{ background: rgba( 120,190,255,0.08 ); color: var( --text ); }

.count{ margin-left: 6px; color: var( --label ); font-size: 12px; }

.sort-ind{
  display:inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid rgba( 235,245,255,0.35 );
  margin-top: 1px;
}
.head-btn.sorted-asc .sort-ind{ border-top-color: rgba( 235,245,255,0.90 ); transform: rotate( 0deg ); }
.head-btn.sorted-desc .sort-ind{ border-top-color: rgba( 235,245,255,0.90 ); transform: rotate( 180deg ); }

/* Column visibility toggle */
.head-btn{
  display: flex;
  align-items: center;
  gap: 4px;
}

.head-label{
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

.col-vis-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  margin-right: 2px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: bold;
  color: rgba( 235, 245, 255, 0.5 );
  border-radius: 3px;
}

.col-vis-btn:hover{
  color: rgba( 235, 245, 255, 0.95 );
  background: rgba( 120, 190, 255, 0.15 );
}

/* X icon when visible (default state) */
.col-vis-btn[data-action="hide"]::after{
  content: "\00D7";
}

/* Arrow icon when hidden */
.col-vis-btn[data-action="show"]::after{
  content: "\2192";
}

/* Hidden column header - only show the restore arrow */
.head-btn.col-hidden{
  justify-content: center;
  padding: 2px;
}

.head-btn.col-hidden .head-label,
.head-btn.col-hidden .sort-ind{
  display: none;
}

.head-btn.col-hidden .col-vis-btn{
  margin: 0;
}

.col.col-hidden{
  overflow: hidden;
}

.col.col-hidden > *:not( .col-vis-btn ){
  display: none;
}

.filter-row .col.col-hidden{
  visibility: hidden;
}

/* Grid-aligned filter containers (pilots) */
.filter-row.grid-aligned .col[data-filter]{
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba( 0,0,0,0.22 );
  border: 1px solid var( --stroke );
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

.filter-row.grid-aligned .col[data-filter="Name"]{
  visibility: hidden;
}

.filter-row.grid-aligned .filter-col-title{
  color: var( --label );
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 8px;
  background: rgba( 0,0,0,0.3 );
  border-bottom: 1px solid var( --stroke );
}

/* Grid-aligned filter selects (pilots) */
.filter-row.grid-aligned select{
  width: 100%;
  border: none;
  background: transparent;
  color: var( --text );
  border-radius: 0;
  padding: 6px;
}

.filter-row.grid-aligned select option{
  background: rgba( 0,0,0,0.3 );
}

.filter-row.grid-aligned select option:nth-child( odd ){
  background: rgba( 80,220,200,0.08 );
}

.filter-row.grid-aligned select option:nth-child( even ){
  background: rgba( 0,0,0,0.3 );
}

.filter-row.grid-aligned select option:checked:nth-child( odd ),
.filter-row.grid-aligned select option[selected]:nth-child( odd ){
  background: rgba( 200,80,0,0.5 ) !important;
  color: var( --text );
}

.filter-row.grid-aligned select option:checked:nth-child( even ),
.filter-row.grid-aligned select option[selected]:nth-child( even ){
  background: rgba( 200,80,0,0.35 ) !important;
  color: var( --text );
}

.btn{
  border: 1px solid rgba( 120,190,255,0.45 );
  background: rgba( 120,190,255,0.12 );
  color: var( --text );
  padding: 8px 10px;
  border-radius: 10px;
  cursor:pointer;
}
.btn-ghost{ width: 70%; background: rgba( 0,0,0,0.18 ); border-color: rgba( 120,190,255,0.25 ); }

.btn-clear-filters{
  appearance: none;
  border: 1px solid rgba( 120,190,255,0.35 );
  background: rgba( 120,190,255,0.08 );
  color: var( --text );
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  font-weight: normal;
  white-space: nowrap;
}
.btn-clear-filters:hover{
  background: rgba( 120,190,255,0.18 );
  border-color: rgba( 120,190,255,0.55 );
}

.rows{
  padding: 4px 0 10px 0;
}

.row{
  width: 100%;
  margin: 3px 0;
  padding: 5px 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba( 0,0,0,0.10 );
  cursor:pointer;
  text-align:left;
  color: var( --text );
  align-items:start;
}
.row.row-odd{
  background: rgba( 255,107,0,0.06 );
}
.row.row-even{
  background: var( --bg );
}

.row:hover{
  border-color: rgba( 255,107,0,0.6 );
  background: rgba( 0,0,0,0.5 );
}

.row.pinned{
  border-color: rgba( 255,107,0,0.6 );
  background: rgba( 255,107,0,0.15 );
  box-shadow: 0 0 0 1px rgba( 255,107,0,0.3 ) inset;
}

.cell-muted{ color: var( --muted ); }

.talent{
  display:inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba( 120,190,255,0.18 );
  background: rgba( 120,190,255,0.08 );
  margin: 2px 4px 2px 0;
  font-size: 12px;
  cursor: default;
  user-select: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.talent:hover{
  border-color: rgba( 120,190,255,0.45 );
  background: rgba( 0,0,0,0.14 );
  box-shadow: 0 0 0 1px rgba( 120,190,255,0.12 ) inset;
}

.talent.pinned{
  border-color: rgba( 255,107,0,0.6 );
  background: rgba( 255,107,0,0.2 );
  box-shadow: 0 0 0 1px rgba( 255,107,0,0.4 ) inset;
}
.talent-stack{ display:flex; flex-direction:column; gap: 4px; }
.talent-stack .talent{ margin:0; }

/* All talents in data rows should span column width */
.row .col .talent{ width: 100%; margin: 2px 0; }

.no-results{
  padding: 12px;
  margin: 10px 12px;
  border: 1px solid rgba( 255,110,110,0.35 );
  background: rgba( 255,110,110,0.08 );
  border-radius: 10px;
  color: rgba( 255,220,220,0.92 );
}
.hidden{ display:none; }

/* Titans vertical key-value list */
.kv-list{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.4;
  padding: 4px 0;
}
.kv-group{
  margin-bottom: 6px;
}
.kv-subheader{
  font-weight: 600;
  color: var( --accent );
  margin-bottom: 3px;
  font-size: 13px;
}
.kv-item{
  display: flex;
  gap: 6px;
}
.kv-key{
  color: var( --label );
  min-width: 100px;
  flex-shrink: 0;
}
.kv-val{
  color: var( --text );
}

/* Titan weapon navigation */
.weapon-nav{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.weapon-nav-btn{
  appearance: none;
  border: 1px solid var( --stroke );
  background: rgba( 0,0,0,0.18 );
  color: var( --text );
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
}
.weapon-nav-btn:hover{
  background: rgba( 120,190,255,0.18 );
  border-color: rgba( 120,190,255,0.45 );
}
.weapon-nav-label{
  font-weight: 600;
  color: var( --accent );
  font-size: 13px;
  flex: 1;
}

/* Titan name column with metadata */
.titan-name-col{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.titan-name{
  font-size: 16px;
  font-weight: 600;
}
.titan-meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.titan-meta .kv-key{
  min-width: 70px;
}

@media ( max-width: 980px ){
  .list-header{ flex-direction: column; }
  .list-nav{ flex-direction: column; align-items: stretch; }
  .nav-controls{ padding-bottom: 0; padding-top: 8px; }
}

.test {
  color: #061118;
}