/* ===== FFXIV World Status (Lodestone-inspired) ===== */

/* Region tabs */
.ws-tabs{
  display:flex;
  gap:0;
  margin:14px 0 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
}
.ws-tab{
  flex:1;
  padding:10px 12px;
  cursor:pointer;
  color:#fff;
  font-weight:900;
  border:none;
  background:transparent;
}
.ws-tab:not(.active){
  opacity:.85;
}
.ws-tab.active{
  background:rgba(52,152,219,.38);
}

/* Legend */
.ws-legend{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  margin-bottom:14px;
}
.ws-legend-item{display:flex;align-items:center;gap:8px;font-weight:800;font-size:12px;opacity:.95}

/* Grid of DC cards */
.ws-dc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:14px;
}

/* Card */
.ws-dc-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.ws-dc-head{
  background:rgba(41, 74, 140, .75);
  color:#fff;
  padding:10px 12px;
  font-weight:1000;
  text-align:center;
}

/* Table */
.ws-table{background:rgba(255,255,255,.03)}
.ws-row{
  display:grid;
  grid-template-columns: 1.6fr 1fr 0.9fr;
  gap:10px;
  align-items:center;
  padding:9px 12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.ws-row.ws-head{
  font-weight:900;
  font-size:12px;
  opacity:.9;
  background:rgba(255,255,255,.04);
}
.ws-cell{min-width:0}
.ws-world{display:flex;align-items:center;gap:10px}
.ws-world-name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-class{font-weight:800;opacity:.95}
.ws-create{display:flex;justify-content:flex-end}

/* Online/offline icons */
.ws-icon{width:10px;height:10px;border-radius:3px;display:inline-block;transform:rotate(45deg)}
.ws-icon.online{background:#67d46a}
.ws-icon.offline{background:#e96b63}

/* Creation of new characters (simple glyphs) */
.ws-cc{
  width:18px;height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  font-weight:1000;
  border:1px solid rgba(255,255,255,.16);
  font-size:14px;
  line-height:1;
}
.ws-cc-ok{background:rgba(103,212,106,.14);color:#9cf0a0}
.ws-cc-no{background:rgba(233,107,99,.14);color:#ffb0ab}
.ws-cc-unk{background:rgba(255,255,255,.08);color:rgba(255,255,255,.75)}

.status-empty{opacity:.85;padding:12px}