:root {
  --bg: #0b0d10;
  --panel: #12161b;
  --panel-2: #171c22;
  --line: #252c35;
  --text: #edf2f7;
  --muted: #8d99a8;
  --gold: #d5af60;
  --gold-soft: #8c7340;
  --green: #5ed6a0;
  --red: #f17b7b;
  --blue: #6db4ff;
  --shadow: 0 18px 50px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; }
body { min-width: 1180px; }
button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { display: grid; grid-template-columns: 245px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 16px; border-right: 1px solid var(--line); background: #0f1216; display: flex; flex-direction: column; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 22px; border-bottom: 1px solid var(--line); min-height: 96px; }
.brand-logo { width: 78px; height: 78px; object-fit: contain; display: block; flex: 0 0 78px; filter: drop-shadow(0 5px 14px rgba(0,0,0,.35)); }
.brand-home { display:block; flex:0 0 78px; border-radius:10px; text-decoration:none; outline:none; }
.brand-home:hover .brand-logo { filter: drop-shadow(0 5px 14px rgba(0,0,0,.35)) brightness(1.08); }
.brand-home:focus-visible { box-shadow:0 0 0 2px var(--gold); }
.brand-copy { min-width: 0; }
.brand-subtitle { color: var(--gold); font-size: 10px; line-height: 1.45; letter-spacing: .14em; font-weight: 700; }
.nav-group { padding: 22px 0 4px; }
.nav-title { padding: 0 10px 8px; color: #6d7785; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
.nav-item { width: 100%; padding: 10px 11px; margin: 2px 0; border: 0; border-radius: 7px; text-align: left; background: transparent; cursor: pointer; color: #bbc5d1; }
.nav-item:hover { background: #151a20; color: white; }
.nav-item.active { background: #1b1b17; color: var(--gold); box-shadow: inset 2px 0 0 var(--gold); }
.nav-item span { float: right; font-size: 10px; color: #59616b; }
.nav-item.disabled { cursor: default; opacity: .48; }
.portal-back { display:flex; align-items:center; gap:8px; margin-top:auto; margin-bottom:14px; padding:10px 11px; border:1px solid var(--line); border-radius:7px; color:#aeb9c6; text-decoration:none; font-size:11px; letter-spacing:.03em; background:#11151a; }
.portal-back:hover { color:var(--gold); border-color:#4b4029; background:#171711; }
.portal-back + .sidebar-foot { margin-top:0; }
.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 18px 8px 0; display: flex; align-items: center; gap: 10px; }
.sidebar-foot strong { display:block; font-size: 12px; }
.sidebar-foot small { color: var(--muted); font-size: 10px; }
.status-dot, .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #69727d; box-shadow: 0 0 0 4px rgba(105,114,125,.08); }
.status-dot.ok, .live-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(94,214,160,.09); }
.status-dot.bad { background: var(--red); box-shadow: 0 0 0 4px rgba(241,123,123,.09); }
.main { padding: 28px 30px 42px; overflow: hidden; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; }
h1 { margin:0; font-size: 26px; letter-spacing:-.02em; }
.topbar p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.server-pill { display:flex; align-items:center; gap:9px; border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:8px 12px; color:#c8d1dc; font-size:12px; }
.cards { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:12px; margin-bottom: 12px; }
.card { background: linear-gradient(180deg,#14191f,#11151a); border:1px solid var(--line); border-radius:10px; padding:16px 18px; min-height:112px; box-shadow: var(--shadow); }
.card.accent { border-color:#463b25; background:linear-gradient(180deg,#181710,#11151a); }
.card-label { color:#929dab; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.card-value { margin-top:8px; font-size:30px; font-weight:760; line-height:1; }
.card-value.small { font-size:23px; color:var(--gold); }
.card-note { margin-top:8px; color:#707b88; font-size:11px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow: var(--shadow); }
.filters-panel { margin-bottom:12px; padding:14px; }
.filters-row { display:grid; grid-template-columns:minmax(250px,1.7fr) repeat(3,minmax(145px,.8fr)) 86px; gap:10px; align-items:end; }
.filters-row label { display:grid; gap:6px; }
.filters-row label > span { color:#7f8a98; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
input, select { width:100%; border:1px solid #2b333d; background:#0d1115; color:#dce4ed; border-radius:7px; padding:9px 10px; outline:none; }
input:focus, select:focus { border-color:#70603a; box-shadow:0 0 0 2px rgba(213,175,96,.08); }
.order-button { height:36px; border:1px solid #2b333d; background:#151a20; border-radius:7px; cursor:pointer; font-size:11px; color:#b9c3ce; }
.order-button:hover { border-color:#4d5864; }
.filter-meta { display:flex; justify-content:space-between; color:#66717f; font-size:11px; padding-top:10px; }
.table-panel { overflow:hidden; }
.table-wrap { overflow:auto; max-height: calc(100vh - 330px); }
table { border-collapse:separate; border-spacing:0; width:100%; min-width:1460px; font-size:12px; }
thead th { position:sticky; top:0; z-index:4; background:#171c22; color:#84909e; font-size:10px; text-transform:uppercase; letter-spacing:.06em; padding:11px 9px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
thead th:first-child, thead th:nth-child(2), tbody td:first-child, tbody td:nth-child(2) { text-align:left; }
tbody td { padding:10px 9px; border-bottom:1px solid #1d232a; text-align:right; white-space:nowrap; color:#c4ced9; }
tbody tr { cursor:pointer; }
tbody tr:hover td { background:#161b21; }
.sticky-name { left:0; z-index:6; }
tbody td:first-child { position:sticky; left:0; z-index:2; background:#12161b; font-weight:700; color:#f0f4f8; }
tbody tr:hover td:first-child { background:#161b21; }
.resource-name { display:flex; align-items:center; gap:7px; }
.new-badge { padding:2px 5px; border-radius:4px; background:#473a1d; color:#efc66f; font-size:8px; letter-spacing:.08em; }
.type-text { color:#9eabb9; }
.stat-high { color:#f0be69; font-weight:700; }
.stat-elite { color:#69d7a5; font-weight:800; }
.stat-null { color:#4b5662; }
.planet-list { display:flex; gap:3px; justify-content:flex-end; }
.planet-chip { min-width:20px; height:20px; display:grid; place-items:center; border:1px solid #34404c; background:#11161b; border-radius:4px; color:#92a4b6; font-size:9px; padding:0 4px; }
.status { display:inline-flex; align-items:center; gap:5px; }
.status::before { content:""; width:6px; height:6px; border-radius:50%; background:#69727d; }
.status.active { color:#79d6ab; }
.status.active::before { background:#5ed6a0; }
.status.inactive { color:#88929e; }
.empty { text-align:center!important; color:#6d7885; padding:32px!important; }
dialog { width:min(940px,90vw); max-height:84vh; border:1px solid #323b45; background:#11161b; color:var(--text); border-radius:12px; padding:0; box-shadow:0 30px 90px rgba(0,0,0,.6); }
dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.dialog-close { position:absolute; right:14px; top:10px; width:32px; height:32px; border:0; border-radius:7px; background:#1c2229; cursor:pointer; font-size:22px; color:#aeb8c4; }
.detail-head { padding:24px 28px 18px; border-bottom:1px solid var(--line); }
.detail-kicker { color:var(--gold); text-transform:uppercase; letter-spacing:.1em; font-size:10px; }
.detail-head h2 { margin:5px 0 3px; font-size:25px; }
.detail-head p { margin:0; color:var(--muted); font-size:12px; }
.detail-body { padding:20px 28px 28px; }
.detail-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.detail-stat { border:1px solid var(--line); background:#0e1216; border-radius:7px; padding:11px; }
.detail-stat span { color:#6f7b88; font-size:10px; }
.detail-stat strong { display:block; margin-top:3px; font-size:17px; }
.detail-section { margin-top:20px; }
.detail-section h3 { margin:0 0 9px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#8995a3; }
.kv { display:grid; grid-template-columns:180px 1fr; border-top:1px solid #20262d; }
.kv div { padding:8px 0; font-size:12px; }
.kv div:first-child { color:#6f7b88; }
.raw-code { white-space:pre-wrap; word-break:break-word; border:1px solid var(--line); background:#0b0f13; padding:12px; border-radius:7px; color:#9fabb8; font:11px ui-monospace,SFMono-Regular,Consolas,monospace; max-height:250px; overflow:auto; }
@media (max-width: 1450px) { .cards { grid-template-columns:repeat(2,1fr); } .table-wrap { max-height:calc(100vh - 440px); } }

.score-pill{display:inline-block;min-width:48px;padding:3px 6px;border:1px solid #35404b;border-radius:999px;color:#aeb9c5;background:#0f1419;font-size:10px;text-align:center}.score-pill.score-high{border-color:#6d5630;color:#f0be69}.score-pill.score-elite{border-color:#2f6850;color:#69d7a5}.detail-stat small{display:block;margin-top:5px;color:#687481;font-size:9px}.cap-range{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#bac6d2}.subtle{font-size:9px;color:#596572;margin-top:3px}select:disabled{opacity:.45}

/* v0.2.3 - selector d'idioma CA / EN */
.top-actions { display:flex; align-items:center; gap:12px; }
.language-switch {
  display:inline-flex;
  align-items:center;
  padding:3px;
  border:1px solid #33404b;
  border-radius:6px;
  background:#10151a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}
.language-button {
  min-width:32px;
  height:26px;
  padding:0 9px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#91a0ae;
  cursor:pointer;
  font-size:9px;
  line-height:26px;
  font-weight:700;
  letter-spacing:.08em;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.language-button:hover { color:#e7edf3; }
.language-button.active {
  background:#e4b756;
  color:#17130b;
  box-shadow:0 1px 4px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.18);
}
.language-button:focus-visible { outline:2px solid rgba(228,183,86,.45); outline-offset:2px; }

/* v0.3.0 - mode d'integracio amb el portal SWGWORLD */
body.portal-embed .app-shell { grid-template-columns: minmax(0,1fr); min-height: 100%; }
body.portal-embed .sidebar { display: none; }
body.portal-embed .main { padding: 20px 22px 30px; }
body.portal-embed .table-wrap { max-height: calc(100vh - 290px); }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; width: 100%; height: auto; }
  .main { padding: 18px 14px 30px; }
  .topbar { align-items: flex-start; gap: 14px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .filters-row { grid-template-columns: 1fr 1fr; }
}