.cex-backdrop{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(2,3,5,.88);
  backdrop-filter:blur(5px);
}

.cex-backdrop.is-open{display:flex}
body.cex-modal-open{overflow:hidden}

.cex-modal{
  position:relative;
  width:min(1120px,96vw);
  max-height:92vh;
  overflow:auto;
  padding:20px;
  border:1px solid #7b6038;
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 0,rgba(123,83,35,.1),transparent 34%),
    linear-gradient(180deg,#15171b,#0b0d10);
  box-shadow:0 28px 80px rgba(0,0,0,.64),0 0 0 1px rgba(216,173,99,.08) inset;
}

.cex-close{
  position:absolute;
  top:11px;
  right:12px;
  z-index:4;
  width:38px;
  height:38px;
  border:1px solid #5b4931;
  border-radius:9px;
  background:#121418;
  color:#e9d4ae;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}

.cex-close:hover,.cex-close:focus-visible{border-color:#d8ad63;color:#fff1d2}

.cex-header{padding-right:50px}

.cex-kicker,.cex-section-kicker,.cex-profile-kicker{
  display:flex;
  align-items:center;
  gap:7px;
  color:#c7a46b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
}

.cex-kicker span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d8ad63;
  box-shadow:0 0 8px rgba(216,173,99,.45);
}

.cex-header h2{
  margin:4px 0 4px;
  font:700 26px/1.05 Georgia,serif;
  color:#f3eadb;
}

.cex-header p{
  margin:0;
  color:#aaa398;
  font-size:12px;
}

.cex-header p strong{color:#e6c58c}

.cex-search{
  margin-top:16px;
  padding:14px;
  border:1px solid #39352e;
  border-radius:11px;
  background:#101216;
}

.cex-search label{
  display:block;
  margin-bottom:7px;
  color:#d8ad63;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.cex-search-row{display:flex;gap:9px}

.cex-search input{
  flex:1 1 auto;
  min-width:0;
  height:44px;
  border:1px solid #454039;
  border-radius:8px;
  padding:0 12px;
  background:#090b0e;
  color:#f1e8da;
  font:600 14px/1 Inter,system-ui,sans-serif;
  outline:none;
}

.cex-search input:focus{border-color:#a77f46;box-shadow:0 0 0 2px rgba(216,173,99,.08)}
.cex-search input::placeholder{color:#6f6b65}

.cex-search-button,.cex-download,.cex-armory-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border:1px solid #715737;
  border-radius:9px;
  padding:0 14px;
  background:linear-gradient(180deg,#2a2116,#17120d);
  color:#ecd19f;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}

.cex-search-button:hover,.cex-search-button:focus-visible,
.cex-download:hover,.cex-download:focus-visible,
.cex-armory-link:hover,.cex-armory-link:focus-visible{
  border-color:#d8ad63;
  color:#fff0cd;
}

.cex-search-button:disabled,.cex-download:disabled{
  opacity:.48;
  cursor:not-allowed;
}

.cex-message{
  margin-top:10px;
  border:1px solid #30343a;
  border-radius:9px;
  padding:10px 12px;
  background:#101216;
  color:#b9b1a5;
  font-size:12px;
  line-height:1.45;
}

.cex-message.is-loading{border-color:#4a4234;color:#d2c3a8}
.cex-message.is-success{border-color:#2e6840;background:#0d1711;color:#9ee0ac}
.cex-message.is-error{border-color:#733d39;background:#1a1010;color:#ef9b92}

.cex-results{margin-top:12px}

.cex-profile-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 15px;
  border:1px solid #4b4030;
  border-radius:11px;
  background:linear-gradient(90deg,#15120e,#111318 58%,#0d0f12);
}

.cex-character-title{
  margin:3px 0 3px;
  color:#f1ddba;
  font:700 23px/1.05 Georgia,serif;
}

.cex-character-meta{color:#b5ada1;font-size:12px}

.cex-profile-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}

.cex-armory-link{background:#13161a;border-color:#484c53;color:#c6c0b5}
.cex-download{min-width:248px}

.cex-content-grid{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr);
  gap:12px;
  margin-top:12px;
}

.cex-equipment-panel,.cex-item-panel{
  min-width:0;
  border:1px solid #30343a;
  border-radius:12px;
  background:#0f1114;
}

.cex-equipment-panel{padding:14px}
.cex-item-panel{padding:14px}

.cex-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:12px;
}

.cex-section-heading h3{
  margin:3px 0 0;
  color:#eee2d0;
  font:700 18px/1 Georgia,serif;
}

.cex-section-heading > span{color:#79756f;font-size:10px}

.cex-paperdoll{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-areas:
    ". . head neck ."
    "weapon ring1 torso ring2 shield"
    ". gloves belt boots ."
    ". swap1 . swap2 .";
  gap:8px;
  min-height:390px;
  padding:20px 12px;
  border:1px solid #292c31;
  border-radius:10px;
  background:
    radial-gradient(ellipse at 50% 44%,rgba(117,78,36,.14),transparent 31%),
    linear-gradient(180deg,#0c0e11,#090a0c);
}

.cex-slot{
  position:relative;
  min-height:82px;
  border:1px solid #35383e;
  border-radius:8px;
  padding:8px 7px;
  background:linear-gradient(180deg,#15171b,#0e1013);
  color:#d7d0c5;
  text-align:center;
  cursor:pointer;
  overflow:hidden;
}

.cex-slot:hover:not(:disabled),.cex-slot:focus-visible:not(:disabled){border-color:#80663f;background:#18150f}
.cex-slot.is-selected{border-color:#c29654;box-shadow:0 0 0 1px rgba(216,173,99,.12) inset,0 0 14px rgba(216,173,99,.08)}
.cex-slot.is-empty{opacity:.48;cursor:default}

.cex-slot-head{grid-area:head}
.cex-slot-neck{grid-area:neck}
.cex-slot-torso{grid-area:torso;min-height:118px}
.cex-slot-weapon{grid-area:weapon;min-height:112px}
.cex-slot-shield{grid-area:shield;min-height:112px}
.cex-slot-ring1{grid-area:ring1}
.cex-slot-ring2{grid-area:ring2}
.cex-slot-belt{grid-area:belt}
.cex-slot-boots{grid-area:boots}
.cex-slot-gloves{grid-area:gloves}
.cex-slot-swap1{grid-area:swap1;border-style:dashed}
.cex-slot-swap2{grid-area:swap2;border-style:dashed}

.cex-slot-label{
  display:block;
  margin-bottom:8px;
  color:#817b72;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.cex-slot-item{
  display:block;
  font:700 12px/1.18 Georgia,serif;
  overflow-wrap:anywhere;
}

.cex-slot-base,.cex-slot-sockets,.cex-slot-empty{
  display:block;
  margin-top:4px;
  color:#89837a;
  font-size:9px;
  line-height:1.25;
}

.cex-slot-sockets{color:#a78d65}

.is-unique{color:#c9a46f!important}
.is-set{color:#62c875!important}
.is-rare{color:#e5df72!important}
.is-magic{color:#858cff!important}
.is-crafted{color:#d99558!important}
.is-low{color:#777!important}
.is-normal{color:#e1ddd5!important}

.cex-item-details{margin-top:9px}
.cex-empty-details,.cex-no-mods{color:#858079;font-size:12px;line-height:1.45}
.cex-detail-slot{color:#777169;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

.cex-detail-name{
  margin:5px 0 3px;
  font:700 20px/1.1 Georgia,serif;
}

.cex-detail-base{color:#9f998f;font-size:11px}
.cex-detail-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}

.cex-tag{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  border:1px solid #41454b;
  border-radius:999px;
  padding:0 8px;
  background:#15181c;
  color:#b9b2a7;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
}

.cex-tag.is-corrupted{border-color:#733b42;color:#e98a95;background:#1b0e11}

.cex-mod-list{
  margin:12px 0 0;
  padding:10px 10px 10px 25px;
  border-top:1px solid #292d32;
  color:#d4cec4;
  font-size:11px;
  line-height:1.42;
}

.cex-mod-list li{margin:3px 0}

.cex-socket-heading{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #292d32;
  color:#b7935c;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.cex-socket-list{display:grid;gap:6px;margin-top:7px}
.cex-socket-item{padding:7px;border:1px solid #2f3237;border-radius:7px;background:#121418}
.cex-socket-item strong,.cex-socket-item span{display:block}
.cex-socket-item strong{font:700 11px/1.2 Georgia,serif}
.cex-socket-item span{margin-top:2px;color:#77726b;font-size:9px}

.cex-save-help{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #3b372f;
  border-radius:9px;
  background:#111216;
  color:#a9a196;
  font-size:11px;
  line-height:1.45;
}

.cex-save-help strong,.cex-save-help b{color:#d7b477}

.cex-technical{
  margin-top:10px;
  border:1px solid #3b3432;
  border-radius:8px;
  background:#120f0f;
  color:#a88985;
  font-size:10px;
}

.cex-technical summary{cursor:pointer;padding:8px 10px;font-weight:700}
.cex-technical pre{margin:0;padding:0 10px 10px;white-space:pre-wrap;overflow-wrap:anywhere;color:#b99894;font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}

.cex-footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 18px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #282b30;
  color:#817c74;
  font-size:9px;
  line-height:1.4;
}

.cex-footer a{color:#c0a16d;text-decoration:none}
.cex-footer a:hover,.cex-footer a:focus-visible{color:#e2c78f;text-decoration:underline}

.cex-engine-frame{
  position:fixed!important;
  left:-10000px!important;
  top:-10000px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  border:0!important;
}

@media(max-width:860px){
  .cex-content-grid{grid-template-columns:1fr}
  .cex-paperdoll{min-height:350px}
}

@media(max-width:760px){
  .cex-backdrop{padding:8px}
  .cex-modal{width:100%;max-height:96vh;padding:13px;border-radius:12px}
  .cex-header h2{font-size:22px}
  .cex-search-row{display:grid;grid-template-columns:1fr}
  .cex-search-button{width:100%}
  .cex-profile-card{align-items:flex-start;flex-direction:column}
  .cex-profile-actions{width:100%;justify-content:stretch}
  .cex-profile-actions > *{flex:1 1 100%}
  .cex-download{min-width:0}
  .cex-paperdoll{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-areas:
      ". head neck"
      "weapon torso shield"
      "ring1 belt ring2"
      "gloves boots ."
      "swap1 . swap2";
    min-height:0;
    padding:12px 8px;
  }
  .cex-slot{min-height:78px}
  .cex-slot-torso,.cex-slot-weapon,.cex-slot-shield{min-height:98px}
  .cex-section-heading{align-items:flex-start;flex-direction:column;gap:4px}
}