:root{
  --control-bg:rgba(7,11,17,.94);
  --control-bg-soft:rgba(0,0,0,.22);
  --control-bg-hover:rgba(0,0,0,.30);
  --control-text:var(--txt,#e8edf3);
  --control-muted:var(--muted,#aab4c0);
  --control-border:rgba(255,255,255,.12);
  --control-border-hover:rgba(255,255,255,.20);
  --control-focus:rgba(136,192,208,.68);
  --control-focus-glow:rgba(136,192,208,.16);
  --control-disabled-bg:rgba(8,12,18,.70);
  --control-disabled-text:rgba(232,237,243,.52);
  --control-invalid:rgba(211,93,110,.72);
}

/* HOTFIX-22: global dark form-control layer.
   This is intentionally shared by app, world, character-create, inventory,
   library, shops, tactics, equipment, modals and admin screens. */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea,
.input,
.form-control,
.form-select{
  width:100%;
  min-width:0;
  max-width:100%;
  padding:10px 12px;
  color:var(--control-text);
  background:var(--control-bg-soft);
  border:1px solid var(--control-border);
  border-radius:12px;
  outline:none;
  color-scheme:dark;
  box-shadow:none;
}

select,
.form-select{
  appearance:auto;
  background-color:var(--control-bg);
  color:var(--control-text);
  padding-right:34px;
}

select option,
select optgroup{
  background-color:#0f1620;
  color:#e8edf3;
}
select option:checked{background-color:#223042;color:#ffffff}
select option:disabled{background-color:#111822;color:rgba(232,237,243,.52)}

input::placeholder,
textarea::placeholder{color:rgba(170,180,192,.70)}

input:not([type]):hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover,
select:hover,
textarea:hover,
.input:hover,
.form-control:hover,
.form-select:hover{
  border-color:var(--control-border-hover);
  background-color:var(--control-bg-hover);
}

input:not([type]):focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus,
.input:focus,
.form-control:focus,
.form-select:focus{
  border-color:var(--control-focus);
  box-shadow:0 0 0 3px var(--control-focus-glow);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.input:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nselect-btn:focus-visible{
  outline:2px solid var(--control-focus);
  outline-offset:2px;
}

input:disabled,
select:disabled,
textarea:disabled,
.input:disabled,
.form-control:disabled,
.form-select:disabled,
input[readonly],
textarea[readonly],
.input[readonly],
.form-control[readonly]{
  color:var(--control-disabled-text);
  background:var(--control-disabled-bg);
  border-color:rgba(255,255,255,.07);
  opacity:.78;
  cursor:not-allowed;
}
input[readonly],textarea[readonly],.input[readonly],.form-control[readonly]{cursor:default}

input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid,
.input.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid{
  border-color:var(--control-invalid);
  box-shadow:0 0 0 3px rgba(211,93,110,.12);
}

/* Shared compact form layouts. */
.form-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;min-width:0}
.form-grid,
.filter-grid,
.compact-form-grid{
  display:grid;
  gap:10px;
  align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  min-width:0;
}
.compact-form-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.filter-grid{width:100%}
.form-field,.filter-field{display:grid;gap:5px;min-width:0}
.form-field > .muted,.filter-field > .muted{line-height:1.1}
.filter-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

@media (max-width: 760px){
  .form-row{align-items:stretch}
  .form-row > *{flex:1 1 100%}
  .form-grid,.filter-grid,.compact-form-grid{grid-template-columns:1fr}
}

/* Custom select (nselect) uses the same token set as native controls. */
.nselect-wrap{position:relative;min-width:0;width:100%}
.nselect-native{position:absolute!important;opacity:0!important;pointer-events:none!important;width:0!important;height:0!important;min-width:0!important;max-width:0!important;padding:0!important;border:0!important}
.nselect-btn{
  width:100%;
  min-width:0;
  padding:10px 12px;
  color:var(--control-text);
  background:var(--control-bg-soft);
  border:1px solid var(--control-border);
  border-radius:12px;
  outline:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  line-height:1.25;
}
.nselect-btn:hover{background:var(--control-bg-hover);border-color:var(--control-border-hover)}
.nselect-wrap.open .nselect-btn,
.nselect-btn:focus{border-color:var(--control-focus);box-shadow:0 0 0 3px var(--control-focus-glow)}
.nselect-btn:disabled,.nselect-wrap.is-disabled .nselect-btn{opacity:.65;cursor:not-allowed;background:var(--control-disabled-bg);color:var(--control-disabled-text)}
.nselect-btn-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nselect-btn-chev{opacity:.8;flex:0 0 auto}
.nselect-btn-chev::before{content:"▾"}
.nselect-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  background:linear-gradient(180deg, rgba(18,27,38,.99), rgba(14,20,29,.99));
  border:1px solid var(--line,#223042);
  border-radius:14px;
  box-shadow:var(--shadow,0 18px 45px rgba(0,0,0,.45));
  padding:6px;
  max-height:280px;
  overflow:auto;
  display:none;
  z-index:900;
}
.nselect-wrap.open .nselect-menu{display:block}
.nselect-item{
  width:100%;
  display:flex;
  align-items:center;
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--control-text);
  cursor:pointer;
}
.nselect-item:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.nselect-item:focus{outline:none;box-shadow:0 0 0 3px var(--control-focus-glow)}
.nselect-item.is-selected{background:rgba(136,192,208,.12);border-color:rgba(136,192,208,.38)}
.nselect-item.is-disabled{opacity:.45;cursor:not-allowed}

/* Page-specific controls may still size themselves, but should not restyle colors. */
.equip-slot-controls .nselect-wrap,
.equip-slot-controls select{width:100%;max-width:100%}
.library-filter-grid{grid-template-columns:minmax(180px,1.4fr) repeat(auto-fit,minmax(120px,1fr)) auto}
.library-advanced-grid{margin-top:12px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.12)}
@media (max-width: 900px){.library-filter-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}
@media (max-width: 640px){.library-filter-grid{grid-template-columns:1fr}.filter-actions .btn{width:100%}}