.equipment-builder {
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #314057;
  border-radius: 6px;
  background: #0b111a;
}

.equipment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  color: #dce6f7;
  font-size: 11px;
  text-transform: uppercase;
}

.equipment-head span { color: #708098; font-weight: 400; }
.equipment-grid {
  position: relative;
  width: min(100%, 350px);
  height: 485px;
  margin: 0 auto;
  border: 1px solid #33402d;
  border-radius: 5px;
  background: radial-gradient(circle at 50% 38%, rgba(103, 126, 81, .16), transparent 34%), linear-gradient(145deg, rgba(45, 54, 41, .84), rgba(13, 18, 16, .96));
  box-shadow: inset 0 0 28px rgba(0, 0, 0, .58);
}
.equipment-slot-holder { position: absolute; width: 55px; height: 75px; display: flex; flex-direction: column; align-items: center; }
.equipment-select {
  position: relative;
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid #485044;
  border-radius: 2px;
  background: #111512;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .5);
}
.equipment-slot-holder.active .equipment-select { border-color: #30f8a0; box-shadow: inset 0 0 0 1px rgba(48, 248, 160, .28), 0 0 10px rgba(48, 248, 160, .22); }
.equipment-slot-holder.mirrored .equipment-select { border-color: #867944; background: #22251a; }
.equipment-slot-holder.blocked .equipment-select { cursor: not-allowed; opacity: .58; }
.equipment-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; border-radius: 2px; }
.equipment-select.has-icon .equipment-placeholder { display: none; }
.equipment-icon { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: auto; border-radius: 2px; }
.equipment-slot-holder.unavailable .equipment-select { opacity: .36; cursor: default; }
.equipment-slot-holder.unavailable .equipment-slot-caption { display: none; }
.equipment-slot-holder.mirrored .equipment-icon { opacity: .38; filter: grayscale(.45); }
.equipment-slot-caption {
  position: absolute;
  inset: auto 1px 1px;
  overflow: hidden;
  padding: 1px 2px;
  background: rgba(0, 0, 0, .75);
  color: #c4ccbf;
  font-size: 8px;
  font-weight: 500;
  line-height: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.equipment-select.has-icon .equipment-slot-caption,
.equipment-select:hover .equipment-slot-caption,
.equipment-select:focus-visible .equipment-slot-caption {
  opacity: 1;
}
.equipment-enchant-badge,
.equipment-twohand-badge { position: absolute; z-index: 2; top: 2px; left: 4px; color: #f1d17b; font: 700 10px "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; text-shadow: 0 1px 2px #000; pointer-events: none; }
.equipment-twohand-badge { top: 45px; left: auto; right: 5px; color: #b9ead8; }
.equipment-remove { position: absolute; z-index: 3; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border: 1px solid #6e484d; border-radius: 50%; background: #302023; color: #ffadb7; font-size: 13px; line-height: 17px; }
.enchant-controls { position: absolute; top: 56px; left: 0; width: 55px; height: 20px; display: grid; grid-template-columns: 17px 21px 17px; border: 1px solid #384239; border-radius: 2px; overflow: hidden; background: #171c18; }
.enchant-controls button { width: 17px; height: 18px; padding: 0; border: 0; border-radius: 0; background: #282e29; color: #b9ead8; font-size: 12px; line-height: 17px; }
.enchant-controls button:disabled { cursor: default; opacity: .35; }
.enchant-controls span { display: grid; place-items: center; border-inline: 1px solid #384239; color: #f1d17b; font: 9px "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; }
.item-search-box { position: relative; margin-top: 7px; }
.item-search-box .catalog-results { top: 49px; left: 0; right: 0; }
.equipment-grade-browser-head {
  position: sticky;
  z-index: 4;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px 9px 10px;
  border-bottom: 1px solid #465044;
  background: #161d18;
}
.equipment-grade-browser-head > strong {
  flex: 1;
  color: #dce6d8;
  font-size: 11px;
  text-transform: uppercase;
}
.equipment-grade-buttons { display: flex; gap: 4px; }
.equipment-grade-buttons button {
  width: 34px;
  height: 27px;
  padding: 0;
  border: 1px solid #566052;
  border-radius: 3px;
  background: #252c27;
  color: #d9ddd4;
  box-shadow: none;
  font: 700 11px "JetBrains Mono", ui-monospace, monospace;
}
.equipment-grade-buttons button:hover,
.equipment-grade-buttons button.active {
  border-color: #30f8a0;
  background: #20382f;
  color: #30f8a0;
}
.equipment-grade-close {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  padding: 0;
  border: 1px solid #667066;
  border-radius: 50%;
  background: #202722;
  color: #e5ebe3;
  box-shadow: none;
  font-size: 18px;
  line-height: 23px;
}
.equipment-grade-close:hover,
.equipment-grade-close:focus-visible {
  border-color: #30f8a0;
  color: #30f8a0;
}
.equipment-grade-message {
  padding: 18px 12px;
  color: #aeb8aa;
  font-size: 12px;
  text-align: center;
}
.catalog-item-icon { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid #4a5148; border-radius: 3px; background: #141814; object-fit: contain; }
.character-side-column { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.passive-skill-panel { margin-top: 8px; padding: 7px; border: 1px solid #33402d; border-radius: 4px; background: rgba(19, 25, 20, .82); }
.passive-skill-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #dce6d8; font-size: 11px; text-transform: uppercase; }
.passive-skill-head span { color: #85907f; font-weight: 400; }
.passive-skill-button, .buff-skill-button, .clan-buff-button { position: relative; width: 44px; height: 44px; padding: 2px; border: 1px solid #485044; border-radius: 2px; background: linear-gradient(145deg, rgba(11, 15, 13, .94), rgba(31, 36, 30, .88)); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .5); }
.passive-skill-button:hover, .passive-skill-button:focus-visible, .buff-skill-button:hover, .buff-skill-button:focus-visible, .clan-buff-button:hover, .clan-buff-button:focus-visible { border-color: #30f8a0; box-shadow: inset 0 0 0 1px rgba(48, 248, 160, .2), 0 0 8px rgba(48, 248, 160, .18); }
.passive-skill-icon, .passive-skill-icon img, .buff-skill-icon, .buff-skill-icon img, .clan-buff-icon, .clan-buff-icon img { display: block; width: 38px; height: 38px; object-fit: contain; }
.passive-skill-icon, .buff-skill-icon, .clan-buff-icon { display: grid; place-items: center; color: #92a18b; }
.passive-skill-level { position: absolute; right: 2px; bottom: 1px; padding: 0 2px; border-radius: 2px; background: rgba(0, 0, 0, .82); color: #f1d17b; font: 700 8px/12px "JetBrains Mono", ui-monospace, monospace; text-shadow: 0 1px 2px #000; }
.armor-set-picker { padding: 7px; border: 1px solid #33402d; border-radius: 4px; background: rgba(19, 25, 20, .82); }
.armor-set-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #dce6d8; font-size: 11px; text-transform: uppercase; }
.armor-set-head span { color: #85907f; font-weight: 400; text-transform: none; }
.armor-set-groups { display: grid; gap: 5px; }
.armor-set-grade { display: grid; grid-template-columns: 13px 1fr; align-items: start; gap: 5px; }
.armor-set-grade > strong { padding-top: 5px; color: #f1d17b; font: 700 12px "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; }
.armor-set-icons { display: flex; flex-wrap: wrap; gap: 4px; }
.armor-set-button { position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 1px; overflow: hidden; border: 1px solid #485044; border-radius: 2px; background: linear-gradient(145deg, rgba(11, 15, 13, .94), rgba(31, 36, 30, .88)); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .5); }
.armor-set-button:hover, .armor-set-button:focus-visible { border-color: #30f8a0; box-shadow: inset 0 0 0 1px rgba(48, 248, 160, .2), 0 0 8px rgba(48, 248, 160, .18); }
.armor-set-button img { width: 40px; height: 40px; object-fit: contain; }
.armor-set-button span { color: #70786d; font: 23px Georgia, serif; }
.armor-set-button.has-icon span { display: none; }
@media (max-width: 390px) {
  .equipment-grid { width: 100%; }
}

.catalog-result-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.catalog-result-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.catalog-result .rare-item-name,
.l2-tooltip-name.rare-item-name,
.l2-tooltip-piece-list .rare-item-name,
.equipment-attribute .rare-item-name {
  color: #ffd45c;
}

.catalog-sa-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border: 1px solid rgba(235, 171, 52, 0.45);
  border-radius: 3px;
  background: rgba(235, 171, 52, 0.16);
  color: #f1d17b;
  font: 700 10px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.2px;
}

.catalog-sa-effect {
  color: #b7c29a;
  font-size: 11px;
  line-height: 14px;
}

.catalog-result-meta {
  color: #7392ad;
  font: 10px "JetBrains Mono", ui-monospace, monospace;
}

/* Authentic Lineage 2 Game Tooltip */
.l2-game-tooltip {
  position: fixed;
  z-index: 99999;
  width: 320px;
  max-width: calc(100vw - 24px);
  pointer-events: none;
  border: 1px solid #6d7f46;
  border-radius: 2px;
  background: #11170f;
  box-shadow: inset 0 0 0 1px rgba(42, 56, 29, 0.8), 0 12px 36px rgba(0, 0, 0, 0.95);
  color: #d3d9c7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
}

.l2-tooltip-header {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #28351f 0%, #192016 100%);
  border-bottom: 1px solid #45542e;
}

.l2-tooltip-icon-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid #786c35;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
}

.l2-tooltip-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.l2-tooltip-enchant-badge {
  position: absolute;
  bottom: 1px;
  right: 2px;
  color: #f1d17b;
  font: 700 10px "JetBrains Mono", monospace;
  text-shadow: 0 1px 2px #000;
}

.l2-tooltip-title-wrap {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.l2-tooltip-name {
  color: #f0d786;
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.l2-tooltip-enchant-title {
  color: #f1d17b;
}

.l2-tooltip-additional {
  color: #b7c29a;
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

.l2-tooltip-meta {
  color: #71806a;
  font: 10px "JetBrains Mono", ui-monospace, monospace;
  margin-top: 2px;
}

.l2-tooltip-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  line-height: 1.4;
}
.l2-tooltip-piece-list { margin: 0; padding: 0 0 6px 18px; border-bottom: 1px solid #344128; color: #cad4b6; }
.l2-tooltip-piece-list li + li { margin-top: 2px; }

.l2-tooltip-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #344128;
}

.l2-tooltip-stat {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: #cad4b6;
  font-size: 11px;
}

.l2-stat-val {
  color: #e4d89f;
  font-weight: 600;
  text-align: right;
}

.l2-enchant-diff {
  color: #30f8a0;
  font-size: 10px;
  font-weight: normal;
}

.l2-tooltip-section {
  padding-top: 6px;
  border-top: 1px solid #344128;
  font-size: 11px;
  line-height: 1.35;
}

.l2-tooltip-sec-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: #ebab34;
  margin-bottom: 2px;
}

.l2-diamond {
  color: #d0ba67;
  font-size: 10px;
}

.l2-sa-name {
  color: #f1d17b;
}

.l2-tooltip-sec-desc {
  color: #d3d9c7;
  font-size: 11px;
}

.l2-tooltip-desc {
  padding-top: 6px;
  border-top: 1px solid #344128;
  color: #a9b993;
  font-size: 11px;
  white-space: pre-wrap;
  line-height: 1.35;
}