/* =============================================================================
   DayZ Expansion AI Loadout Editor — v6 Styles
   Theme: LG POS design system (Rajdhani + Roboto + Roboto Mono)
   ============================================================================= */

/* ═══ SPLASH / LOGIN ════════════════════════════════════════════════════════════ */

.splash {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  background: var(--bg);
}
.splash.on { display: flex; }

.sp-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 35%, #0b2040, #070c14 68%);
}
.sp-grid {
  position: absolute; inset: 0; opacity: .04; pointer-events: none;
  background-image: linear-gradient(var(--bda) 1px, transparent 1px),
                    linear-gradient(90deg, var(--bda) 1px, transparent 1px);
  background-size: 48px 48px;
}
.sp-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 400px; padding: 2rem 1.5rem;
}
.sp-logo {
  width: 140px; height: 140px; object-fit: contain; margin-bottom: 1.1rem;
  filter: drop-shadow(0 0 22px rgba(200,168,75,.4));
  animation: spPulse 3s ease-in-out infinite;
}
@keyframes spPulse {
  0%,100% { filter: drop-shadow(0 0 16px rgba(200,168,75,.28)); }
  50%      { filter: drop-shadow(0 0 32px rgba(200,168,75,.58)); }
}
.sp-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2rem; font-weight: 700; letter-spacing: .14em;
  color: var(--fg); line-height: 1.15; margin-bottom: .3rem; text-align: center;
}
.sp-title em { font-style: normal; color: var(--gold); }
.sp-sub {
  font-family: 'Roboto Mono', monospace;
  font-size: .68rem; letter-spacing: .22em; color: var(--fmut);
  text-transform: uppercase; margin-bottom: 1.5rem;
}

.login-card {
  width: 100%;
  background: var(--panel); border: 1px solid var(--bdd);
  border-radius: var(--rl); padding: 1.6rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.55); margin-bottom: 1rem;
}
.login-card h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem; font-weight: 600; letter-spacing: .14em; color: var(--blue);
  margin-bottom: 1.1rem; display: flex; align-items: center; gap: .42rem;
}
.login-card h2::before { content: '◆'; color: var(--gold); font-size: .7em; }

.sp-field { margin-bottom: .75rem; }
.sp-field label {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fmut); margin-bottom: .28rem;
}
.sp-field input {
  width: 100%; padding: .55rem .78rem;
  background: var(--inp); color: var(--fg);
  border: 1px solid var(--bdd); border-radius: var(--r); font-size: .9rem;
  transition: border-color .18s, box-shadow .18s;
}
.sp-field input:focus { outline: none; border-color: var(--bda); box-shadow: 0 0 0 2px rgba(42,159,214,.18); }

.sp-err {
  min-height: 1.1rem; font-size: .8rem;
  color: var(--buy); margin: .3rem 0 0; text-align: center;
}
.sp-footer {
  font-family: 'Roboto Mono', monospace;
  font-size: .65rem; letter-spacing: .1em; color: var(--fdim);
}

/* ═══ NAV USER / LOGOUT ══════════════════════════════════════════════════════════ */

.nav-user-wrap {
  display: flex; align-items: center; gap: .42rem;
  border-left: 1px solid var(--bdd); padding-left: .75rem; margin-left: .25rem;
}
.nav-user-lbl {
  font-family: 'Roboto Mono', monospace;
  font-size: .72rem; color: var(--fmut); white-space: nowrap;
}

/* ═══ ADMIN PANEL ════════════════════════════════════════════════════════════════ */

.admin-user-list { display: grid; gap: 3px; }

.admin-user-row {
  display: flex; align-items: center; gap: .62rem;
  padding: .58rem .72rem;
  background: var(--card); border: 1px solid var(--bdd); border-radius: var(--r);
  flex-wrap: wrap;
}

.admin-uname {
  flex: 1; font-family: 'Rajdhani', sans-serif;
  font-weight: 700; font-size: .9rem; letter-spacing: .04em;
}

.admin-badge {
  font-family: 'Roboto Mono', monospace;
  font-size: .64rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .1rem .42rem; border-radius: 3px;
  background: var(--inp); border: 1px solid var(--bdd); color: var(--fmut);
}
.admin-badge.admin { background: rgba(200,168,75,.12); border-color: rgba(200,168,75,.3); color: var(--gold); }

.admin-row-actions { display: flex; gap: .36rem; margin-left: auto; }

/* ═══ TOKENS ═══════════════════════════════════════════════════════════════════ */
:root {
  --bg:   #070c14; --panel: #0c1524; --card: #0f1e30; --inp: #091420;
  --bdd:  #1a3352; --bda:  #1b5fa0;
  --fg:   #c8d8e8; --fmut: #5a7a9a; --fdim: #2a4060;
  --shad: rgba(0,0,0,.55);
  --gold: #c8a84b; --blue: #2a9fd6; --sell: #4fdc6f; --buy: #e03a3a;
  --r: 5px; --rl: 9px;
}

/* ═══ RESET & BASE ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  font-family: 'Roboto', sans-serif;
  background: var(--bg);
  color: var(--fg);
}

body { padding: 1.2rem 1.45rem; }

button, input, select, textarea { font-family: 'Roboto', sans-serif; }

button { cursor: pointer; border: 0; }

input, select, textarea {
  width: 100%;
  padding: .52rem .76rem;
  background: var(--inp);
  color: var(--fg);
  border: 1px solid var(--bdd);
  border-radius: var(--r);
  font-size: .88rem;
  transition: border-color .18s, box-shadow .18s;
  color-scheme: dark;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%235a7a9a'%3E%3Cpath d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

select option { background: var(--panel); color: var(--fg); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--bda);
  box-shadow: 0 0 0 2px rgba(42,159,214,.18);
}

label { display: grid; gap: 5px; }
label > span, label > .frow-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fmut);
}

a { color: var(--blue); }

/* ═══ LAYOUT ════════════════════════════════════════════════════════════════════ */

.app-shell { max-width: 1820px; margin: 0 auto; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: 1.2rem;
  padding: 1.15rem 1.4rem;
  margin-bottom: 1.1rem;
  background: var(--panel);
  border: 1px solid var(--bdd);
  border-radius: var(--rl);
  box-shadow: 0 2px 8px var(--shad);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--bdd);
  border-radius: var(--rl);
  padding: .95rem 1.1rem;
  box-shadow: 0 2px 8px var(--shad);
}

.hero-copy { display: grid; gap: 7px; align-content: start; }

.hero-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .2rem;
}

.hero-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(200,168,75,.35));
}

.panel-meta-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  opacity: .55;
  flex-shrink: 0;
}

.eyebrow, .panel-kicker, .node-kicker {
  font-family: 'Roboto Mono', monospace;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fmut);
  margin: 0 0 3px;
}

.hero h1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.05;
  color: var(--fg);
  margin: 0;
}

.hero h1 em { font-style: normal; color: var(--gold); }

.panel h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--fg);
  margin: 0;
}

.section-heading h3, .empty-state h3, .node-title, .compact-heading h5 { margin: 0; }

.hero-text, .helper-text, .section-heading p, .empty-state p {
  margin: 0;
  color: var(--fmut);
  font-size: .86rem;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  gap: .48rem;
  flex-wrap: wrap;
  align-content: start;
}

.workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1.6fr) 340px;
  gap: 1.1rem;
}

.panel-sidebar, .panel-meta {
  align-self: start;
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 44px);
  overflow: auto;
}

/* ═══ BUTTONS ═══════════════════════════════════════════════════════════════════ */

.primary-btn, .ghost-btn, .danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .36rem;
  padding: .5rem 1.1rem;
  border: none;
  border-radius: var(--r);
  font-family: 'Rajdhani', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}

.small-btn { padding: .28rem .65rem; font-size: .78rem; }
.icon-btn  { width: 30px; height: 30px; padding: 0; border-radius: var(--r); font-size: 12px; }

.primary-btn { background: linear-gradient(135deg,#175f96,#1e88c8); color: #fff; }
.primary-btn:hover:not(:disabled) { background: linear-gradient(135deg,#1e88c8,#28a8ef); box-shadow: 0 0 14px rgba(42,159,214,.38); }

.ghost-btn { background: transparent; color: var(--fmut); border: 1px solid var(--bdd); }
.ghost-btn:hover:not(:disabled) { border-color: var(--bda); color: var(--fg); }

.danger-btn { background: linear-gradient(135deg,#5a1010,#b02020); color: #fff; }
.danger-btn:hover:not(:disabled) { filter: brightness(1.1); }

.primary-btn:disabled, .ghost-btn:disabled, .danger-btn:disabled {
  opacity: .44; cursor: not-allowed;
}

/* ═══ PANEL HEADER / SECTION HEADINGS ══════════════════════════════════════════ */

.panel-header, .section-heading {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: .75rem;
}

.secondary-header { margin-top: 1.3rem; }
.section-heading  { margin-bottom: .75rem; }
.inline-actions   { display: flex; gap: .48rem; flex-wrap: wrap; align-items: center; }

/* ═══ SERVER BAR ════════════════════════════════════════════════════════════════ */

.server-bar {
  display: flex;
  align-items: center;
  gap: .48rem;
  flex-wrap: wrap;
  padding: .52rem .72rem;
  margin: -.95rem -1.1rem .75rem -1.1rem;
  background: var(--card);
  border-bottom: 1px solid var(--bdd);
  border-radius: var(--rl) var(--rl) 0 0;
}

.server-bar-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fmut);
  white-space: nowrap;
  display: block;
}

.server-select {
  flex: 1;
  min-width: 0;
  font-size: .84rem;
  padding: .26rem 26px .26rem .58rem;
}

.srv-health-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
  padding: .18rem .48rem;
  border-radius: 3px;
}

.srv-health-badge.ok   { color: var(--sell); background: rgba(79,220,111,.1);  border: 1px solid rgba(79,220,111,.3); }
.srv-health-badge.warn { color: var(--gold); background: rgba(200,168,75,.1);  border: 1px solid rgba(200,168,75,.3); }
.srv-health-badge.err  { color: var(--buy);  background: rgba(224,58,58,.1);   border: 1px solid rgba(224,58,58,.3); }

/* ═══ LOADOUT COUNT ══════════════════════════════════════════════════════════════ */

.loadout-count {
  display: inline-block;
  font-family: 'Roboto Mono', monospace;
  font-size: .7rem;
  font-weight: 500;
  background: var(--inp);
  border: 1px solid var(--bdd);
  border-radius: 3px;
  padding: .08rem .36rem;
  margin-left: .4rem;
  color: var(--fmut);
  vertical-align: middle;
}

/* ═══ LOADOUT LIST ═══════════════════════════════════════════════════════════════ */

.stack-list { display: grid; gap: 3px; margin-top: .48rem; }

.list-card {
  display: flex;
  align-items: center;
  gap: .58rem;
  padding: .52rem .68rem;
  border-radius: var(--r);
  border: 1px solid var(--bdd);
  background: var(--card);
  text-align: left;
  transition: background .12s, border-color .12s;
  width: 100%;
}

.list-card:hover { background: var(--inp); border-color: var(--bda); }

.list-card.active {
  border-color: var(--blue);
  background: rgba(42,159,214,.08);
}

.list-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; }
.dot-ok   { background: var(--sell); }
.dot-warn { background: var(--gold); }
.dot-err  { background: var(--buy); }

.card-body     { flex: 1; min-width: 0; display: grid; gap: 2px; }
.card-title    { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: .86rem; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-subtitle { color: var(--fmut); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.list-actions { display: flex; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity .12s; }
.list-card:hover .list-actions { opacity: 1; }

.icon-action {
  background: none; border: none;
  color: var(--fmut); font-size: 12px;
  padding: 3px 5px; border-radius: var(--r);
  transition: background .1s, color .1s;
}
.dup-action:hover { color: var(--sell); background: rgba(79,220,111,.12); }
.del-action:hover { color: var(--buy);  background: rgba(224,58,58,.12); }

/* ═══ SAVE BADGE ════════════════════════════════════════════════════════════════ */

.save-badge {
  font-family: 'Roboto Mono', monospace;
  font-size: .7rem;
  padding: .18rem .52rem;
  border-radius: 3px;
  font-weight: 500;
  align-self: center;
}

.save-badge.saving { background: rgba(200,168,75,.1);   color: var(--gold); border: 1px solid rgba(200,168,75,.3); }
.save-badge.saved  { background: rgba(79,220,111,.1);   color: var(--sell); border: 1px solid rgba(79,220,111,.3); }

/* ═══ EDITOR PANEL ═══════════════════════════════════════════════════════════════ */

.panel-editor { display: flex; flex-direction: column; gap: .9rem; }

/* Section tabs */
.section-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--bdd);
  margin-bottom: 2px;
}

.sec-tab {
  background: none; border: none;
  border-bottom: 2px solid transparent;
  padding: .38rem .76rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fmut);
  border-radius: var(--r) var(--r) 0 0;
  transition: color .12s, border-color .12s;
  display: flex; align-items: center; gap: .36rem;
}

.sec-tab:hover  { color: var(--fg); }
.sec-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.tab-badge {
  font-family: 'Roboto Mono', monospace;
  font-size: .64rem;
  padding: .08rem .36rem;
  border-radius: 3px;
  background: var(--inp);
  border: 1px solid var(--bdd);
  color: var(--fmut);
}

.tab-badge.badge-err  { background: rgba(224,58,58,.12);  border-color: rgba(224,58,58,.3);  color: var(--buy); }
.tab-badge.badge-warn { background: rgba(200,168,75,.12); border-color: rgba(200,168,75,.3); color: var(--gold); }

/* Empty state */
.empty-state {
  padding: 2.2rem 1.3rem;
  text-align: center;
  border-radius: var(--rl);
  border: 1px dashed var(--bdd);
  background: var(--card);
  display: grid;
  gap: .68rem;
  justify-items: center;
}

.empty-state h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--fmut);
}

.empty-state-actions { display: flex; gap: .52rem; flex-wrap: wrap; justify-content: center; }

/* Editor sections */
.editor-section { display: grid; gap: .9rem; }

/* ═══ FORM SECTIONS ══════════════════════════════════════════════════════════════ */

.form-section {
  background: var(--card);
  border: 1px solid var(--bdd);
  border-radius: var(--rl);
  padding: .9rem 1.05rem;
  display: grid;
  gap: .9rem;
}

.accent-section {
  border-color: rgba(42,159,214,.25);
  background: rgba(42,159,214,.04);
}

.field-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.identity-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }

.nested-list { display: grid; gap: .52rem; }

/* ═══ HEALTH ROWS ════════════════════════════════════════════════════════════════ */

.health-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr auto;
  gap: .52rem;
  align-items: end;
  background: var(--inp);
  border: 1px solid var(--bdd);
  border-radius: var(--r);
  padding: .65rem .78rem;
}

/* ═══ SLOT GRID (TILES) ══════════════════════════════════════════════════════════ */

.drag-hint { font-size: .7rem; color: var(--fmut); margin-bottom: .26rem; }

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: .44rem;
  margin-bottom: .7rem;
}

.slot-tile {
  background: var(--card);
  border: 1px solid var(--bdd);
  border-radius: var(--r);
  padding: .55rem .68rem;
  cursor: pointer;
  position: relative;
  transition: border-color .12s, background .12s, opacity .1s;
  min-height: 58px;
}

.slot-tile:hover      { border-color: var(--bda); background: var(--inp); }
.slot-tile.filled     { border-color: rgba(42,159,214,.38); }
.slot-tile.sel        { border-color: var(--blue); background: rgba(42,159,214,.08); }
.slot-tile.herr       { border-color: rgba(224,58,58,.48); background: rgba(224,58,58,.06); }
.slot-tile.drag-over  { border-color: var(--sell); background: rgba(79,220,111,.07); opacity: .7; }
.slot-tile.dragging   { opacity: .3; }

.tile-actions { position: absolute; top: 4px; right: 4px; display: none; gap: 2px; }
.slot-tile:hover .tile-actions { display: flex; }

.tile-btn {
  background: none; border: none;
  font-size: 11px; color: var(--fmut);
  padding: 2px 4px; border-radius: 3px; line-height: 1;
  transition: color .08s, background .08s;
}

.tile-dup:hover  { color: var(--sell); background: rgba(79,220,111,.15); }
.tile-copy:hover { color: var(--blue); background: rgba(42,159,214,.15); }
.tile-del:hover  { color: var(--buy);  background: rgba(224,58,58,.15); }

.tile-slot-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: .64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fmut);
  margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.slot-tile.filled .tile-slot-name { color: var(--blue); }
.slot-tile.sel    .tile-slot-name { color: var(--blue); }
.slot-tile.herr   .tile-slot-name { color: var(--buy); }

.tile-item-name { font-size: .78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-alt       { font-size: .67rem; color: var(--fmut); }
.tile-empty     { font-size: .73rem; color: var(--fdim); font-style: italic; }

/* ═══ SLOT DETAIL EDITOR ═════════════════════════════════════════════════════════ */

.slot-detail-box {
  background: rgba(42,159,214,.05);
  border: 1px solid rgba(42,159,214,.2);
  border-radius: var(--rl);
  padding: .9rem 1.05rem;
  display: grid;
  gap: .7rem;
}

.slot-detail-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--blue);
}

.frow-inline { display: flex; align-items: center; gap: .58rem; flex-wrap: wrap; }
.frow-label  {
  font-family: 'Rajdhani', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fmut);
  white-space: nowrap;
  flex-shrink: 0;
}

.slot-name-field { max-width: 185px; }

.items-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fmut);
}
.items-label-sub { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .7; }

/* ═══ ITEM BLOCKS ════════════════════════════════════════════════════════════════ */

.item-block {
  background: var(--inp);
  border: 1px solid var(--bdd);
  border-radius: var(--r);
  padding: .65rem .78rem;
  display: grid;
  gap: .48rem;
}

.item-block-err { border-color: rgba(224,58,58,.38); }

.item-block-row {
  display: flex;
  align-items: center;
  gap: .48rem;
  flex-wrap: wrap;
}

.item-cn-input { flex: 3; min-width: 0; }
.item-cn-input.field-err { border-color: var(--buy); background: rgba(224,58,58,.07); }

.inline-lbl {
  display: flex;
  align-items: center;
  gap: .36rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fmut);
  white-space: nowrap;
}

.item-remove-btn {
  background: none; border: none;
  color: var(--fmut); font-size: 13px;
  padding: 2px 5px; border-radius: var(--r);
  transition: color .08s, background .08s;
  flex-shrink: 0;
}
.item-remove-btn:hover { color: var(--buy); background: rgba(224,58,58,.12); }

/* ═══ COLLAPSIBLE SECTIONS ═══════════════════════════════════════════════════════ */

.collapsible { margin-top: .34rem; }

.coll-hdr {
  display: flex;
  align-items: center;
  gap: .36rem;
  cursor: pointer;
  user-select: none;
  padding: 3px 0;
}

.coll-arr { font-size: .64rem; color: var(--fmut); display: inline-block; transition: transform .12s; }
.coll-arr.open { transform: rotate(90deg); }

.coll-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fmut);
}
.coll-count { color: var(--fmut); opacity: .7; }

.coll-body { display: none; }
.coll-body.open { display: block; }

.coll-indent {
  margin-left: 11px;
  border-left: 2px solid var(--bdd);
  padding-left: 9px;
  margin-top: .34rem;
}

/* ═══ NEST ROWS ══════════════════════════════════════════════════════════════════ */

.nest-block { margin-bottom: .48rem; }

.nest-row {
  display: flex;
  align-items: center;
  gap: .36rem;
  flex-wrap: wrap;
}

.nest-row input[type="text"],
.nest-row input[type="number"] {
  padding: .26rem .48rem;
  border-radius: var(--r);
  font-size: .8rem;
}

.nest-row input[type="text"]   { flex: 2; min-width: 80px; }
.nest-row input[type="number"] { width: 56px; flex: none; }

.slot-in-set {
  background: var(--inp);
  border: 1px solid var(--bdd);
  border-radius: var(--r);
  padding: .58rem .78rem;
  margin-bottom: .48rem;
  display: grid;
  gap: .48rem;
}

/* ═══ ADD-ROW BUTTON ════════════════════════════════════════════════════════════ */

.add-row-btn {
  width: 100%;
  padding: .42rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  border: 1px dashed var(--bdd);
  border-radius: var(--r);
  background: transparent;
  color: var(--fmut);
  transition: border-color .12s, color .12s, background .12s;
  margin-top: 3px;
}

.add-row-btn:hover { border-color: var(--sell); color: var(--sell); background: rgba(79,220,111,.06); }

/* ═══ FIELD ERROR STATE ══════════════════════════════════════════════════════════ */

.field-err { border-color: var(--buy) !important; background: rgba(224,58,58,.07) !important; }

/* ═══ PCT LABEL ══════════════════════════════════════════════════════════════════ */

.pct-label { font-family: 'Roboto Mono', monospace; color: var(--blue); font-size: .8rem; }

/* ═══ SET CARDS ══════════════════════════════════════════════════════════════════ */

.set-card {
  border: 1px solid var(--bdd);
  border-radius: var(--rl);
  overflow: hidden;
  margin-bottom: .58rem;
  background: var(--card);
}

.set-card-hdr {
  display: flex;
  align-items: center;
  gap: .58rem;
  padding: .55rem .78rem;
  background: var(--inp);
  cursor: pointer;
  transition: border-color .1s;
}

.set-card-hdr:hover { background: var(--card); }

.set-card-name {
  flex: 1;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .08em;
}

.set-card-badge {
  font-family: 'Roboto Mono', monospace;
  font-size: .68rem;
  color: var(--fmut);
  background: var(--card);
  border: 1px solid var(--bdd);
  border-radius: 3px;
  padding: .08rem .38rem;
}

.set-card-body { padding: .78rem; border-top: 1px solid var(--bdd); }

.set-tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--bdd); margin-bottom: .7rem; }

.set-tab {
  background: none; border: none;
  border-bottom: 2px solid transparent;
  padding: .3rem .68rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fmut);
  cursor: pointer;
  transition: color .1s, border-color .1s;
}

.set-tab:hover  { color: var(--fg); }
.set-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* ═══ VALIDATION / COMPAT DISPLAY ════════════════════════════════════════════════ */

.val-stats {
  display: flex;
  gap: .58rem;
  flex-wrap: wrap;
  padding: .55rem .78rem;
  background: var(--inp);
  border: 1px solid var(--bdd);
  border-radius: var(--r);
}

.val-stat { font-size: .78rem; color: var(--fmut); }
.val-stat b { color: var(--fg); }
.stat-ok   { color: var(--sell) !important; }
.stat-warn { color: var(--gold) !important; }
.stat-err  { color: var(--buy)  !important; }

.validation-list { display: grid; gap: .46rem; }

.validation-card {
  padding: .58rem .78rem;
  border-radius: var(--r);
  border: 1px solid var(--bdd);
  background: var(--card);
  font-size: .84rem;
  line-height: 1.5;
}

.validation-card.good { border-color: rgba(79,220,111,.3);  background: rgba(79,220,111,.07); }
.validation-card.bad  { border-color: rgba(224,58,58,.3);   background: rgba(224,58,58,.07); }
.validation-card.warn { border-color: rgba(200,168,75,.3);  background: rgba(200,168,75,.07); }

.val-where {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fmut);
  display: block;
  margin-bottom: 2px;
}
.val-msg { display: block; }

/* Compat-specific */
.compat-loc    { font-size: .73rem; color: var(--fmut); margin-bottom: 3px; }
.compat-row    { display: flex; gap: .58rem; align-items: baseline; flex-wrap: wrap; }
.compat-weapon { font-weight: 700; font-family: 'Roboto Mono', monospace; font-size: .82rem; }
.compat-ok     { color: var(--sell); font-size: .8rem; }
.compat-warn   { color: var(--gold); font-size: .8rem; }
.compat-err    { color: var(--buy);  font-size: .8rem; }
.compat-mags   { font-size: .76rem; margin-top: 3px; display: flex; gap: 3px; flex-wrap: wrap; }
.mag-tag  { padding: .08rem .4rem; border-radius: 3px; font-size: .7rem; font-family: 'Roboto Mono', monospace; }
.ok-tag   { background: rgba(79,220,111,.1);  border: 1px solid rgba(79,220,111,.3);  color: var(--sell); }
.warn-tag { background: rgba(200,168,75,.1);  border: 1px solid rgba(200,168,75,.3);  color: var(--gold); }

/* ═══ SAVED PROJECTS / SERVER LIST (RIGHT PANEL) ═════════════════════════════════ */

.saved-projects-list { display: grid; gap: .44rem; margin-top: .48rem; }

.saved-project-card {
  display: flex;
  align-items: center;
  gap: .58rem;
  padding: .58rem .78rem;
  border-radius: var(--r);
  border: 1px solid var(--bdd);
  background: var(--card);
}

.saved-project-card.active-server {
  border-color: var(--blue);
  background: rgba(42,159,214,.07);
}

.active-lbl {
  font-family: 'Roboto Mono', monospace;
  font-size: .66rem;
  color: var(--blue);
  font-weight: 500;
}

.saved-project-actions { margin-left: auto; display: flex; gap: .36rem; }

/* ═══ EMPTY LIST PLACEHOLDER ═════════════════════════════════════════════════════ */

.empty-list {
  padding: 1.1rem;
  text-align: center;
  color: var(--fmut);
  font-size: .82rem;
  border-radius: var(--r);
  border: 1px dashed var(--bdd);
}

/* ═══ AUTOCOMPLETE ═══════════════════════════════════════════════════════════════ */

.ac-wrap { position: relative; }

.ac-list {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--panel);
  border: 1px solid var(--bda);
  border-radius: var(--r);
  z-index: 50;
  max-height: 155px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 6px 20px var(--shad);
}

.ac-list.show { display: block; }

.ac-item {
  padding: .4rem .68rem;
  font-size: .82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .48rem;
  border-bottom: 1px solid var(--bdd);
  transition: background .08s;
}

.ac-item:last-child { border-bottom: none; }

.ac-item:hover, .ac-item.active {
  background: var(--card);
  color: var(--blue);
}

.ac-cat {
  font-family: 'Roboto Mono', monospace;
  font-size: .64rem;
  color: var(--fmut);
  margin-left: auto;
}

/* ═══ MODALS ═════════════════════════════════════════════════════════════════════ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7,12,20,.88);
  backdrop-filter: blur(5px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 200;
  padding: 3.5rem 1rem;
}

.modal-backdrop.open { display: flex; }

.modal {
  background: var(--panel);
  border: 1px solid var(--bda);
  border-radius: var(--rl);
  padding: 1.4rem;
  width: 460px;
  max-width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  display: grid;
  gap: .9rem;
  box-shadow: 0 20px 60px var(--shad);
}

.modal-wide   { width: 560px; }
.modal-narrow { width: 340px; }

.modal h2 {
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.modal h2::before { content: '◆'; color: var(--gold); font-size: .7em; }

.modal-desc { margin: 0; font-size: .82rem; color: var(--fmut); line-height: 1.5; }

.modal-field { display: grid; gap: .4rem; }
.modal-field label {
  font-family: 'Rajdhani', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fmut);
  display: block;
}
.field-optional { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .7; }

.modal-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

.modal-checkboxes { display: flex; gap: .9rem; flex-wrap: wrap; }
.checkbox-label { display: flex; align-items: center; gap: .36rem; font-size: .82rem; color: var(--fmut); cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: auto; }

.modal-actions { display: flex; gap: .52rem; justify-content: flex-end; flex-wrap: wrap; }

.modal-divider { border: none; border-top: 1px solid var(--bdd); margin: 2px 0; }

/* Server manage modal rows */
.srv-modal-row {
  display: flex;
  align-items: center;
  gap: .58rem;
  padding: .58rem 0;
  border-bottom: 1px solid var(--bdd);
  flex-wrap: wrap;
}

.srv-modal-name { flex: 1; font-family: 'Rajdhani', sans-serif; font-size: .86rem; font-weight: 700; letter-spacing: .04em; }
.srv-modal-name.active-name { color: var(--blue); }
.srv-modal-count { font-family: 'Roboto Mono', monospace; font-size: .72rem; color: var(--fmut); white-space: nowrap; }
.srv-modal-btns  { display: flex; gap: .36rem; flex-wrap: wrap; }

/* Batch replace preview */
.replace-preview {
  background: var(--inp);
  border: 1px solid var(--bdd);
  border-radius: var(--r);
  padding: .58rem;
  max-height: 150px;
  overflow-y: auto;
}

.rp-item { display: flex; gap: .48rem; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--bdd); font-size: .78rem; font-family: 'Roboto Mono', monospace; }
.rp-old  { color: var(--buy);  text-decoration: line-through; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-arr  { color: var(--fmut); }
.rp-new  { color: var(--sell); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.replace-count { font-family: 'Roboto Mono', monospace; font-size: .74rem; color: var(--fmut); }

/* Copy-slot modal list */
.copy-slot-list { max-height: 300px; overflow-y: auto; display: grid; gap: 2px; }

.copy-slot-server-hdr {
  font-family: 'Rajdhani', sans-serif;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fmut);
  padding: .58rem .48rem .26rem;
}

.copy-slot-item {
  display: flex;
  align-items: center;
  gap: .58rem;
  padding: .48rem .58rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .08s;
}

.copy-slot-item:hover    { background: var(--card); }
.copy-slot-item.selected { background: rgba(42,159,214,.1); border-color: rgba(42,159,214,.4); }

.csi-name  { flex: 1; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csi-count { font-family: 'Roboto Mono', monospace; font-size: .7rem; color: var(--fmut); }

/* ═══ TOAST ══════════════════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: 1.1rem;
  right: 1.1rem;
  padding: .58rem .95rem;
  border-radius: var(--r);
  font-size: .8rem;
  font-weight: 500;
  z-index: 500;
  border: 1px solid;
  box-shadow: 0 4px 16px var(--shad);
  pointer-events: none;
}

/* ═══ RANGE INPUT ════════════════════════════════════════════════════════════════ */

input[type="range"] {
  padding: 3px 0;
  accent-color: var(--blue);
  border: none;
  background: none;
}

/* ═══ PHASE 2 — SIDEBAR FILTER & EXPORT PATH HINT ═══════════════════════════════ */

.sidebar-filter-wrap { padding: 0 0 .58rem 0; }

.sidebar-filter {
  width: 100%;
  box-sizing: border-box;
  background: var(--inp);
  border: 1px solid var(--bdd);
  border-radius: var(--r);
  color: var(--fg);
  padding: .4rem .58rem;
  font-size: .82rem;
  font-family: 'Roboto', sans-serif;
}

.sidebar-filter:focus { outline: none; border-color: var(--bda); box-shadow: 0 0 0 2px rgba(42,159,214,.18); }

.export-path-hint {
  font-size: .74rem;
  color: var(--fmut);
  margin: -2px 0 .78rem 0;
  padding: .4rem .58rem;
  background: rgba(42,159,214,.06);
  border-radius: var(--r);
  border-left: 2px solid var(--blue);
}

.export-path-hint code {
  font-family: 'Roboto Mono', monospace;
  color: var(--blue);
  font-size: .78rem;
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════════════ */

@media (max-width: 1420px) {
  .workspace { grid-template-columns: 278px minmax(0, 1fr) 295px; }
}

@media (max-width: 1200px) {
  .workspace { grid-template-columns: 1fr; }
  .panel-sidebar, .panel-meta { position: static; max-height: none; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .field-grid, .health-row, .modal-two-col { grid-template-columns: 1fr; }
  .slot-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

@media (max-width: 720px) {
  body { padding: .78rem; }
  .hero, .panel { padding: .78rem .88rem; }
  .identity-grid { grid-template-columns: 1fr; }
}