/* ── App-wide themed scrollbars ──────────────────────────────────── */
:root {
  --sb-thumb: rgba(255,160,0,0.45);
  --sb-thumb-hover: rgba(255,215,0,0.75);
  --sb-track: rgba(4,2,14,0.92);
}

.dome-panel-inner {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
.dome-panel-inner::-webkit-scrollbar         { width: 7px; }
.dome-panel-inner::-webkit-scrollbar-track   { background: var(--sb-track); border-radius: 4px; }
.dome-panel-inner::-webkit-scrollbar-thumb   { background: var(--sb-thumb); border-radius: 4px; }
.dome-panel-inner::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }

/* ── DOME PANELS — centered modal overlays ──────────────────────── */
.dome-panel {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.78);
}
.dome-panel.open { display: flex; }

.dome-panel-inner {
  background: rgba(8,6,18,0.99);
  border: 1px solid rgba(255,215,0,0.22);
  border-radius: 18px;
  width: min(84vw, 1300px);
  max-width: 97vw;
  max-height: 88vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 8px 60px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,215,0,0.06) inset;
  animation: fadeIn 0.22s ease;
}

.dome-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,215,0,0.12);
  flex-shrink: 0;
}
.dome-panel-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,215,0,0.85);
}
.dome-panel-close {
  width: 32px; height: 32px;
  background: rgba(200,20,20,0.25);
  border: 1.5px solid rgba(255,60,60,0.7);
  border-radius: 7px;
  color: #ff4444;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
  font-family: inherit;
  box-shadow: 0 0 10px rgba(255,40,40,0.35);
}
.dome-panel-close:hover { background: rgba(220,30,30,0.5); border-color: #ff2222; color: #fff; box-shadow: 0 0 18px rgba(255,40,40,0.6); }

/* ── PANEL FRAME WRAPPERS ──────────────────────────────────── */
.panel-frame-wrap {
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#panelWarcamp .panel-frame-wrap  { width: min(42vw, 580px);  max-width: 97vw; }
#panelBarracks .panel-frame-wrap { width: min(82vw, 1080px); max-width: 97vw; }

#panelTome .dome-panel-inner {
  width: min(58vw, 660px);
}
#panelTome .dome-panel-inner.tome-stats-view {
  width: min(82vw, 1280px);
  max-height: 90vh;
}

#panelWarcamp .dome-panel-inner,
#panelBarracks .dome-panel-inner {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  width: 100%;
  padding: 95px 85px 95px;
  scrollbar-width: none;
}
#panelWarcamp .dome-panel-inner::-webkit-scrollbar,
#panelBarracks .dome-panel-inner::-webkit-scrollbar { width: 0; background: transparent; }

#panelBarracks .dome-panel-inner { padding: 105px 115px 110px; }

/* ── OPEN POSITIONS LIST ─────────────────────────────────────── */
.open-pos-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
}
.open-pos-card.long-card  { border-left: 3px solid rgba(0,200,80,0.5); }
.open-pos-card.short-card { border-left: 3px solid rgba(255,80,80,0.5); }
.pos-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pos-asset { font-size: 0.9rem; font-weight: 800; }
.pos-dir-badge { font-size: 0.55rem; font-weight: 700; letter-spacing: 1.5px; padding: 2px 7px; border-radius: 5px; }
.pos-dir-badge.long  { background: rgba(0,200,80,0.12); color: #00e070; border: 1px solid rgba(0,200,80,0.25); }
.pos-dir-badge.short { background: rgba(255,80,80,0.12); color: #ff5555; border: 1px solid rgba(255,80,80,0.25); }
.pos-wb-label { font-size: 0.62rem; color: rgba(255,215,0,0.55); display: block; margin-bottom: 3px; }
.pos-meta { font-size: 0.65rem; color: var(--dim); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.pos-risk-chip { background: rgba(255,80,80,0.1); border: 1px solid rgba(255,80,80,0.2); border-radius: 5px; padding: 1px 6px; color: #ff8888; font-size: 0.62rem; font-weight: 700; }
.pos-card-actions { display: flex; gap: 6px; }
.btn-close-pos {
  flex: 1; padding: 5px; background: rgba(0,200,80,0.1); border: 1px solid rgba(0,200,80,0.3);
  border-radius: 7px; color: #00e070; font-size: 0.65rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.18s;
}
.btn-void-pos {
  flex: 1; padding: 5px; background: rgba(255,80,80,0.08); border: 1px solid rgba(255,80,80,0.2);
  border-radius: 7px; color: #ff6060; font-size: 0.65rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.18s;
}

.open-pos-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.open-pos-asset  { font-size: 0.85rem; font-weight: 800; color: rgba(255,255,255,0.9); }
.open-pos-dir    { font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; padding: 2px 7px; border-radius: 5px; }
.open-pos-dir.long  { background: rgba(0,200,80,0.12); color: #00e070; border: 1px solid rgba(0,200,80,0.25); }
.open-pos-dir.short { background: rgba(255,80,80,0.12); color: #ff5555; border: 1px solid rgba(255,80,80,0.25); }
.open-pos-time   { font-size: 0.58rem; color: var(--dim); }
.open-pos-body   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.open-pos-risk   { font-size: 0.65rem; color: rgba(255,100,100,0.8); font-weight: 700; }
.open-pos-levels {
  display: flex; gap: 10px; margin: 4px 0 7px;
  font-size: 0.6rem; color: rgba(255,255,255,0.45); font-weight: 600;
}
.open-pos-levels b { color: rgba(255,255,255,0.75); }
.open-pos-actions { display: flex; gap: 6px; margin-top: 4px; }

/* ── TRADE HISTORY ───────────────────────────────────────────── */
.trade-row, .trade-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 4px;
}
.trade-row.win, .trade-item.win { border-left: 3px solid rgba(0,255,136,0.4); }
.trade-row.loss, .trade-item.loss { border-left: 3px solid rgba(255,68,85,0.4); }
.trade-row.be, .trade-item.be { border-left: 3px solid rgba(255,215,0,0.3); }
.trade-left { display: flex; flex-direction: column; gap: 2px; }
.trade-asset { font-weight: 700; font-size: 0.78rem; }
.trade-date  { font-size: 0.62rem; color: rgba(255,255,255,0.6); }
.trade-r { font-weight: 700; font-size: 0.8rem; white-space: nowrap; }
.trade-row .t-asset { font-weight: 700; }
.trade-row .t-r.positive { color: #00FF88; }
.trade-row .t-r.negative { color: #FF4455; }
.trade-row .t-r.be { color: #FFD700; }

/* ── MARCH FORM ──────────────────────────────────────────────── */
.form-row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.form-group { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 0.6rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); }
.form-group input { padding: 8px 10px; width: 100%; }
.dir-toggle { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.dir-btn {
  flex: 1; padding: 7px; font-size: 0.7rem; font-weight: 700; cursor: pointer; border: none;
  background: rgba(255,255,255,0.03); color: var(--dim); font-family: inherit; transition: all 0.18s;
}
.dir-long.active  { background: rgba(0,200,80,0.15); color: #00e070; }
.dir-short.active { background: rgba(255,80,80,0.15); color: #ff5555; }
.risk-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.risk-btn {
  padding: 7px 4px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px; color: var(--dim); font-size: 0.68rem; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: all 0.18s; text-align: center;
}
.risk-btn:hover { border-color: rgba(255,215,0,0.3); color: var(--gold); }
.risk-btn.active { background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.5); color: var(--gold); box-shadow: 0 0 8px rgba(255,215,0,0.15); }
.risk-selected-row { display: flex; align-items: center; margin-top: 8px; }

/* ── MINE PANEL ──────────────────────────────────────────────── */
.mine-action-bar { width: 100%; }
.mine-action-main { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#mineBigBtn {
  width: 100%; padding: 13px; background: rgba(255,215,0,0.05); border: 1px solid rgba(255,215,0,0.2);
  border-radius: 10px; color: rgba(255,215,0,0.4); font-size: 0.82rem; font-weight: 800; cursor: not-allowed;
  font-family: inherit; transition: all 0.3s; letter-spacing: 1.5px; text-transform: uppercase;
}
#mineBigBtn.ready {
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,215,0,0.08));
  border-color: rgba(255,215,0,0.5); color: var(--gold); cursor: pointer;
  box-shadow: 0 0 20px rgba(255,215,0,0.2);
}
#mineBigBtn.ready:hover { box-shadow: 0 0 32px rgba(255,215,0,0.35); }
#mineCountdownBar {
  width: 100%; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden;
}
#mineCountdownFill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,215,0,0.4), rgba(255,215,0,0.8));
  transition: width 1s linear;
}
#mineCountdownText { font-size: 0.65rem; color: var(--dim); text-align: center; }

/* ── PROVISIONS HEADER ───────────────────────────────────────── */
.prov-header {
  background: rgba(255,215,0,0.04);
  border: 1px solid rgba(255,215,0,0.14);
  border-radius: 12px;
  padding: 14px 16px 12px;
  margin-bottom: 12px;
}
.prov-header-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.prov-header-label { font-size:0.52rem; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,215,0,0.5); font-weight:700; }
.prov-cycle-btn { font-size:0.62rem; padding:4px 10px; background:rgba(255,215,0,0.07); border:1px solid rgba(255,215,0,0.2); border-radius:6px; color:rgba(255,215,0,0.7); cursor:pointer; font-family:inherit; }
.prov-cycle-btn:hover { background:rgba(255,215,0,0.13); }
.prov-header-stats { display:flex; margin-bottom:10px; }
.prov-stat { flex:1; text-align:center; }
.prov-stat + .prov-stat { border-left:1px solid rgba(255,255,255,0.07); }
.prov-stat-val   { font-size:1.05rem; font-weight:800; color:rgba(255,215,0,0.92); line-height:1; margin-bottom:4px; }
.prov-stat-label { font-size:0.5rem; color:rgba(255,215,0,0.45); text-transform:uppercase; letter-spacing:1.2px; }
.prov-header-bar-track { height:5px; background:rgba(255,255,255,0.07); border-radius:3px; overflow:hidden; }
.prov-header-bar-fill  { height:100%; background:linear-gradient(90deg,rgba(0,180,75,0.8),rgba(0,240,100,0.95)); border-radius:3px; transition:width 0.5s ease; }

/* ── PROVISION CARDS (2-col grid) ────────────────────────────── */
.provision-list { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; contain:layout style; }
.prov-card {
  display:flex; flex-direction:column; overflow:hidden;
  background: rgba(20,14,40,0.97);
  border:1px solid rgba(255,215,0,0.35);
  border-radius:14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.55);
  transition:border-color 0.15s;
  will-change: transform;
  contain: layout style paint;
}
.prov-card:hover { border-color:rgba(255,215,0,0.65); }
.prov-card[draggable] { cursor:default; user-select:none; position:relative; }
.prov-card[draggable] input,
.prov-card[draggable] button,
.prov-card[draggable] select { user-select:text; }
.prov-drag-handle { position:absolute; top:4px; right:4px; font-size:1rem; color:rgba(255,215,0,0.35); cursor:grab; line-height:1; z-index:2; padding:2px 3px; border-radius:4px; transition:color 0.15s; }
.prov-card[draggable]:hover .prov-drag-handle { color:rgba(255,215,0,0.7); }
.prov-drag-handle:active { cursor:grabbing; }
.prov-card.covered { border-color:rgba(0,200,80,0.55); box-shadow:0 0 12px rgba(0,200,80,0.15); }
.prov-card.debt    { border-top:3px solid rgba(255,140,0,0.6); border-color:rgba(255,140,0,0.35); }
.prov-card-img { width:100%; height:130px; object-fit:contain; background:rgba(0,0,0,0.12); display:block; opacity:1; cursor:pointer; flex-shrink:0; }
.prov-card-body { flex:1; padding:8px; display:flex; flex-direction:column; gap:5px; }
.prov-card-name-row { display:flex; align-items:center; gap:4px; }
.prov-card-name { flex:1; min-width:0; font-size:0.72rem; font-weight:700; color:rgba(255,215,0,0.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prov-delete-btn { background:none; border:none; color:rgba(255,80,80,0.28); cursor:pointer; font-size:0.72rem; padding:0 2px; flex-shrink:0; transition:color 0.15s; line-height:1; }
.prov-delete-btn:hover { color:rgba(255,80,80,0.85); }
.prov-debt-months { font-size:0.56rem; color:rgba(255,140,0,0.8); }
.prov-req-row { display:flex; align-items:center; gap:4px; }
.prov-req-label { font-size:0.57rem; color:rgba(255,215,0,0.5); white-space:nowrap; flex-shrink:0; font-weight:600; }
.prov-req-input { flex:1; min-width:0; padding:3px 5px; background:rgba(255,215,0,0.07); border:1px solid rgba(255,215,0,0.2); border-radius:5px; color:#FFD700; -webkit-text-fill-color:#FFD700; font-size:0.72rem; font-family:inherit; text-align:right; font-weight:700; }
.prov-req-input:focus { outline:none; border-color:rgba(255,215,0,0.5); background:rgba(255,215,0,0.12); }
.prov-req-btn { padding:3px 6px; background:rgba(255,215,0,0.09); border:1px solid rgba(255,215,0,0.3); border-radius:5px; color:#FFD700; font-size:0.62rem; font-weight:700; cursor:pointer; font-family:inherit; flex-shrink:0; }
.prov-req-btn:hover { background:rgba(255,215,0,0.2); }
.prov-progress-track { height:4px; background:rgba(255,255,255,0.07); border-radius:3px; overflow:hidden; }
.prov-progress-fill  { height:100%; border-radius:3px; background:linear-gradient(90deg,rgba(0,150,65,0.85),rgba(0,230,95,0.95)); transition:width 0.4s ease; }
.prov-progress-row   { display:flex; justify-content:space-between; font-size:0.54rem; color:rgba(255,215,0,0.55); }
.prov-covered-badge  { font-size:0.58rem; color:rgba(0,210,85,0.9); font-weight:700; }
.prov-fund-row { display:flex; gap:4px; align-items:center; margin-top:1px; }
.prov-fund-input { flex:1; min-width:0; padding:4px 5px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.1); border-radius:5px; color:var(--text); font-size:0.65rem; font-family:inherit; }
.prov-fund-input:focus { outline:none; border-color:rgba(0,200,80,0.4); }
.prov-fund-btn { padding:4px 7px; background:rgba(0,180,80,0.1); border:1px solid rgba(0,180,80,0.3); border-radius:5px; color:#00e070; font-size:0.6rem; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.prov-fund-btn:hover { background:rgba(0,180,80,0.22); }
.prov-advance-btn { padding:4px 5px; background:rgba(255,140,0,0.07); border:1px solid rgba(255,140,0,0.25); border-radius:5px; color:rgba(255,140,0,0.85); font-size:0.58rem; cursor:pointer; font-family:inherit; }
.prov-advance-btn:hover { background:rgba(255,140,0,0.18); }
.prov-autofund-btn { display:block; width:100%; margin-top:4px; padding:5px 0; background:rgba(255,215,0,0.07); border:1px solid rgba(255,215,0,0.28); border-radius:6px; color:rgba(255,215,0,0.55); font-size:0.62rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; cursor:pointer; font-family:inherit; transition:background 0.15s, border-color 0.15s, color 0.15s; text-align:center; }
.prov-autofund-btn.on { background:rgba(80,220,40,0.15); border-color:rgba(80,220,40,0.55); color:#4aff88; }
.prov-autofund-btn:hover { background:rgba(255,215,0,0.16); border-color:rgba(255,215,0,0.55); color:rgba(255,215,0,1); }
/* legacy — keep IDs working if referenced elsewhere */
.provision-totals { display:none; }
.provision-total-item, .provision-total-label, .provision-total-value { display:none; }

/* ── TREASURY ────────────────────────────────────────────────── */
#treasuryFundsList { display:grid; grid-template-columns:1fr 1fr; gap:10px; contain:layout style; }
.tac-card {
  background: rgba(18,14,32,0.97);
  border:1px solid rgba(255,215,0,0.35);
  border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow: 0 4px 12px rgba(0,0,0,0.55);
  transition: border-color 0.15s;
  will-change: transform;
  contain: layout style paint;
}
.tac-card:hover { border-color:rgba(255,215,0,0.65); }
.tac-img { width:100%; height:150px; object-fit:contain; background:rgba(0,0,0,0.1); display:block; opacity:1; cursor:pointer; }
.tac-header { display:flex; gap:8px; padding:9px 10px 5px; align-items:flex-start; }
.tac-info { flex:1; min-width:0; }
.tac-name { font-size:0.72rem; font-weight:700; color:rgba(255,215,0,0.92); margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tac-balance { font-size:1rem; font-weight:800; line-height:1.1; }
.tac-target { font-size:0.57rem; color:rgba(255,255,255,0.6); margin-top:1px; }
.tac-delete-btn { background:none; border:none; color:rgba(255,80,80,0.28); cursor:pointer; font-size:0.78rem; padding:0 2px; flex-shrink:0; transition:color 0.15s; line-height:1; }
.tac-delete-btn:hover { color:rgba(255,80,80,0.8); }
.tac-progress-wrap { padding:0 10px 3px; }
.tac-progress-track { height:4px; background:rgba(255,255,255,0.07); border-radius:3px; overflow:hidden; }
.tac-progress-fill { height:100%; border-radius:3px; transition:width 0.4s ease; }
.tac-pct-label { font-size:0.54rem; color:rgba(255,255,255,0.6); padding:2px 10px 6px; }
.tac-milestones { display:flex; gap:4px; padding:0 10px 8px; justify-content:space-between; }
.tac-milestone { display:flex; flex-direction:column; align-items:center; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); border-radius:6px; padding:4px 3px; flex:1; min-width:0; transition:border-color 0.15s; }
.tac-milestone.ready { border-color:rgba(255,215,0,0.4); background:rgba(255,215,0,0.06); cursor:pointer; }
.tac-milestone.ready:hover { border-color:rgba(255,215,0,0.7); }
.tac-milestone.claimed { opacity:0.38; }
.tac-milestone-chest { width:26px; height:26px; object-fit:cover; border-radius:4px; margin-bottom:2px; }
.tac-milestone-pct { font-size:0.5rem; color:rgba(255,255,255,0.38); font-weight:700; }
.tac-milestone-badge { font-size:0.48rem; margin-top:1px; }
.tac-milestone-badge.claimed { color:#00e070; }
.tac-milestone-badge.ready   { color:#FFD700; font-weight:700; }
.tac-milestone-badge.locked  { color:rgba(255,255,255,0.18); }
.tac-fund-row { display:flex; gap:5px; padding:0 10px 10px; margin-top:auto; }
.tac-fund-input { flex:1; min-width:0; padding:4px 6px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.1); border-radius:5px; color:var(--text); font-size:0.68rem; font-family:inherit; }
.tac-fund-input:focus { outline:none; border-color:rgba(255,215,0,0.35); }
.tac-fund-btn { padding:4px 10px; background:rgba(255,215,0,0.08); border:1px solid rgba(255,215,0,0.25); border-radius:5px; color:#FFD700; font-size:0.64rem; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.tac-fund-btn:hover { background:rgba(255,215,0,0.16); }
/* legacy references */
.treasury-funds-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.treasury-fund-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,215,0,0.1); border-radius:10px; overflow:hidden; }
.treasury-fund-name { font-size:0.65rem; color:var(--dim); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.treasury-fund-balance { font-size:1rem; font-weight:700; color:var(--gold); }
.treasury-fund-target { font-size:0.62rem; color:rgba(255,255,255,0.6); margin-top:2px; }

/* ── ANALYTICS EXTENDED ──────────────────────────────────────── */
.an-intel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.an-intel-box  { background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07); border-radius:9px; padding:9px 10px; text-align:center; }
.an-intel-val  { font-size:0.88rem; font-weight:700; margin-bottom:3px; }
.an-intel-lbl  { font-size:0.52rem; color:rgba(255,255,255,0.52); letter-spacing:1.5px; text-transform:uppercase; }
.an-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.an-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.an-card   { background:rgba(255,255,255,0.025); border:1px solid rgba(255,215,0,0.15); border-radius:10px; padding:10px 12px; }
.an-card-label  { font-size:0.52rem; letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; font-weight:700; }
.an-card-wr     { font-size:1.1rem; font-weight:700; margin-bottom:4px; }
.an-mini-bar    { height:4px; border-radius:2px; background:rgba(255,255,255,0.06); margin-bottom:6px; overflow:hidden; }
.an-mini-bar-fill { height:100%; border-radius:2px; }
.an-card-r      { font-size:0.68rem; font-weight:700; margin-bottom:3px; }
.an-card-counts { font-size:0.58rem; color:rgba(255,255,255,0.6); }

/* ── MARKET ──────────────────────────────────────────────────── */
.market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  contain: layout style;
}
.market-item {
  background: rgba(18,14,32,0.97);
  border: 1px solid rgba(255,215,0,0.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.55);
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s;
  display: flex;
  flex-direction: column;
  will-change: transform;
  contain: layout style paint;
}
.market-item:hover { border-color: rgba(255,215,0,0.65); transform: translateY(-2px); }
.market-item-img { width: 100%; height: 110px; object-fit: contain; background: rgba(0,0,0,0.1); display: block; cursor: pointer; }
.market-item-icon { font-size: 2.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; height: 110px; background: rgba(255,215,0,0.04); }
.market-item-body { padding: 8px 8px 10px; display: flex; flex-direction: column; flex: 1; }
.market-item-name { font-size: 0.62rem; color: rgba(255,215,0,0.88); line-height: 1.3; margin-bottom: 4px; }
.market-item-cost { font-size: 0.68rem; font-weight: 700; color: var(--gold); }
.market-item-btn {
  margin-top: 6px; padding: 4px 10px;
  background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.2); border-radius: 6px;
  color: var(--gold); font-size: 0.62rem; font-weight: 700; cursor: pointer; font-family: inherit;
  width: 100%; transition: background 0.18s, border-color 0.18s;
}
.market-item-btn:hover { background: rgba(255,215,0,0.15); }
.market-item-desc { font-size:0.58rem;color:rgba(255,255,255,0.38);line-height:1.4;margin-bottom:4px; }
.market-item.locked { cursor:default; }
.market-item.locked:hover { border-color:rgba(255,215,0,0.28); }
.market-item-btn.disabled { cursor:default; pointer-events:none; color:rgba(255,255,255,0.4); }

/* ── WAR CHEST PANEL ─────────────────────────────────────────── */
.war-chest-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,215,0,0.08);
  border-radius: 10px;
  margin-top: 6px;
}
.war-chest-left { flex: 1; min-width: 0; }
.war-chest-label { font-size: 0.58rem; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
.war-chest-value { font-size: 1.1rem; font-weight: 700; color: #4aff88; }
.war-chest-sub { font-size: 0.6rem; color: rgba(255,255,255,0.6); margin-top: 2px; }
.war-chest-edit-wrap { display: flex; align-items: center; }
.war-chest-input {
  width: 130px; padding: 5px 8px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.12); border-radius: 7px;
  color: var(--text); font-size: 0.75rem;
}
.btn-chest-edit {
  padding: 5px 10px; background: rgba(255,215,0,0.07); border: 1px solid rgba(255,215,0,0.2);
  border-radius: 7px; color: rgba(255,215,0,0.7); font-size: 0.68rem; cursor: pointer; font-family: inherit;
}
.btn-chest-save {
  padding: 5px 10px; background: rgba(0,200,80,0.1); border: 1px solid rgba(0,200,80,0.3);
  border-radius: 7px; color: #00e070; font-size: 0.68rem; cursor: pointer; font-family: inherit;
}
.btn-warband-delete {
  padding: 5px 10px; background: rgba(255,50,50,0.08); border: 1px solid rgba(255,50,50,0.2);
  border-radius: 7px; color: #ff6060; font-size: 0.68rem; cursor: pointer; font-family: inherit;
}

/* ── CHAMPION SLOTS ──────────────────────────────────────────── */
.champ-slots-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; contain: layout style; }
.champ-slot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 10px 8px;
  background: rgba(18,14,32,0.95);
  border: 1px solid rgba(255,215,0,0.28);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.55);
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s;
  min-height: 100px;
  justify-content: center;
  will-change: transform;
  contain: layout style paint;
}
.champ-slot-card:hover { border-color: rgba(255,215,0,0.6); transform: translateY(-2px); }
.champ-slot-img {
  width: 54px; height: 54px; border-radius: 9px; object-fit: cover;
  border: 1.5px solid rgba(255,215,0,0.3); flex-shrink: 0;
}
.champ-slot-info { width: 100%; min-width: 0; }
.champ-slot-label { font-size: 0.48rem; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.champ-slot-name { font-size: 0.72rem; font-weight: 700; color: rgba(255,215,0,0.88); line-height: 1.2; }
.champ-slot-tier { font-size: 0.56rem; color: rgba(255,215,0,0.5); letter-spacing: 1px; text-transform: uppercase; }
.champ-slot-passive { font-size: 0.58rem; color: rgba(255,255,255,0.4); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champ-slot-locked {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 6px; background: rgba(255,255,255,0.01); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; color: var(--dim); font-size: 0.62rem; text-align: center; min-height: 100px;
}
.champ-slot-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 6px; background: rgba(255,215,0,0.03); border: 1px dashed rgba(255,215,0,0.15);
  border-radius: 10px; color: rgba(255,215,0,0.5); font-size: 0.62rem; cursor: pointer;
  transition: all 0.18s; min-height: 100px; text-align: center;
}
.champ-slot-empty:hover { border-color: rgba(255,215,0,0.35); background: rgba(255,215,0,0.06); }
.champ-slot-cta-btn {
  width: 100%; padding: 8px; margin-top: 6px;
  background: rgba(255,215,0,0.06); border: 1px solid rgba(255,215,0,0.15); border-radius: 8px;
  color: rgba(255,215,0,0.6); font-size: 0.68rem; cursor: pointer; font-family: inherit; transition: all 0.18s;
}
.champ-slots-title { font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 1px; }
.champ-slot-plus  { font-size: 1.6rem; color: rgba(255,215,0,0.4); line-height: 1; }
.champ-slot-badge { font-size: 0.58rem; color: rgba(255,255,255,0.5); text-align: center; line-height: 1.4; }
.champ-slot-swap  { background: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; color: rgba(255,255,255,0.3); font-size: 0.7rem; cursor: pointer; padding: 3px 6px; flex-shrink: 0; transition: all 0.15s; margin-top: 2px; }
.champ-slot-swap:hover { border-color: rgba(255,215,0,0.3); color: rgba(255,215,0,0.7); }
.champ-pick-cnt { font-size: 0.6rem; color: rgba(255,215,0,0.7); font-weight: 700; }
.phase-dot { font-size: 0.6rem; color: rgba(255,255,255,0.2); margin-left: 3px; }
.phase-dot.active { color: #FFD700; }

/* ── SCAN PANEL ──────────────────────────────────────────────── */
.scan-bridge-section {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  margin-bottom: 8px;
}
.scan-bridge-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.68rem;
}
.scan-bridge-name { font-weight: 700; color: rgba(255,255,255,0.7); }
.scan-bridge-status { font-size: 0.6rem; padding: 2px 8px; border-radius: 5px; font-weight: 700; }
.scan-bridge-status.online  { background: rgba(0,200,80,0.12); color: #00e070; border: 1px solid rgba(0,200,80,0.25); }
.scan-bridge-status.offline { background: rgba(255,80,80,0.1); color: #ff6060; border: 1px solid rgba(255,80,80,0.2); }
.scan-launcher-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.scan-launcher-btn {
  padding: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; color: rgba(255,255,255,0.65); font-size: 0.7rem; font-weight: 700; cursor: pointer;
  font-family: inherit; text-align: center; transition: all 0.18s;
}
.scan-launcher-btn:hover { border-color: rgba(255,215,0,0.3); color: var(--gold); background: rgba(255,215,0,0.05); }

/* ── SCANNER CARDS ────────────────────────────────────────────── */
.scanner-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid rgba(255,215,0,0.25);
  background: rgba(20,12,42,0.96);
  box-shadow: 0 4px 12px rgba(0,0,0,0.55);
  transition: transform 0.2s, border-color 0.2s;
  will-change: transform;
  contain: layout style paint;
}
.scanner-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.4), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.scanner-card:hover { transform: translateY(-2px); border-color: rgba(255,215,0,0.5); }
.scanner-card:hover::before { opacity: 1; }
.scanner-card.iron { border-color: rgba(180,120,30,0.3); background: rgba(30,16,6,0.96); }
.scanner-card.iron::before { background: linear-gradient(90deg, transparent, rgba(200,140,40,0.4), transparent); }
.scanner-card.iron:hover { border-color: rgba(200,150,40,0.55); }
.scanner-card-icon { font-size: 2.4rem; flex-shrink: 0; filter: drop-shadow(0 0 14px rgba(255,215,0,0.45)); line-height: 1; }
.scanner-card.iron .scanner-card-icon { filter: drop-shadow(0 0 14px rgba(200,140,40,0.45)); }
.scanner-card-info { flex: 1; min-width: 0; }
.scanner-card-name { font-size: 1.05rem; font-weight: 800; color: #FFD700; letter-spacing: 0.5px; margin-bottom: 4px; text-shadow: 0 0 18px rgba(255,215,0,0.35); }
.scanner-card.iron .scanner-card-name { color: rgba(230,165,55,0.95); text-shadow: 0 0 18px rgba(200,140,40,0.35); }
.scanner-card-desc { font-size: 0.6rem; color: rgba(255,255,255,0.6); letter-spacing: 0.3px; margin-bottom: 7px; }
.scanner-card-tag { font-size: 0.48rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,215,0,0.55); background: rgba(255,215,0,0.06); border: 1px solid rgba(255,215,0,0.18); border-radius: 20px; padding: 2px 9px; display: inline-block; }
.scanner-card.iron .scanner-card-tag { color: rgba(200,140,40,0.65); background: rgba(200,140,40,0.06); border-color: rgba(200,140,40,0.2); }
.scanner-card-arrow { font-size: 1.6rem; font-weight: 300; color: rgba(255,215,0,0.3); flex-shrink: 0; line-height: 1; transition: color 0.2s, transform 0.2s; }
.scanner-card.iron .scanner-card-arrow { color: rgba(200,140,40,0.3); }
.scanner-card:hover .scanner-card-arrow { color: rgba(255,215,0,0.9); transform: translateX(4px); }
.scanner-card.iron:hover .scanner-card-arrow { color: rgba(230,165,55,0.9); }

/* ── PANEL / TAB DESCRIPTION BANNER ─────────────────────────── */
.tab-desc {
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 14px;
  background:rgba(255,215,0,0.03);
  border:1px solid rgba(255,215,0,0.09);
  border-radius:9px;
  margin-bottom:14px;
}
.tab-desc-icon { font-size:1.3rem;flex-shrink:0;line-height:1;width:44px;height:44px;display:flex;align-items:center;justify-content:center; }
.tab-desc-icon img { width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,215,0,0.25);box-shadow:0 0 12px rgba(255,215,0,0.12); }
.tab-desc-body { flex:1;min-width:0; }
.tab-desc-title { font-size:0.58rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,215,0,0.5);font-weight:700;margin-bottom:4px; }
.tab-desc-text  { font-size:0.7rem;color:rgba(255,255,255,0.45);line-height:1.65;font-style:italic; }

/* ── TOME TABS ───────────────────────────────────────────────── */
.tome-tabs { display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid rgba(255,215,0,0.1);padding-bottom:8px; }
.tome-tab {
  flex:1;padding:7px 4px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;color:rgba(255,255,255,0.45);font-size:0.62rem;font-weight:700;cursor:pointer;
  font-family:inherit;text-align:center;transition:all 0.18s;white-space:nowrap;
}
.tome-tab:hover { border-color:rgba(255,215,0,0.2);color:rgba(255,215,0,0.6); }
.tome-tab.active { background:rgba(255,215,0,0.1);border-color:rgba(255,215,0,0.35);color:#FFD700; }
.tome-pane { display:flex;flex-direction:column;gap:0; }

/* ── CODEX / CHAMPION GALLERY ───────────────────────────────── */
.codex-gallery {
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;contain:layout style;
}
.codex-champ-card {
  background: rgba(18,14,32,0.97);
  border:1px solid rgba(255,215,0,0.32);border-radius:14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.55);
  padding:10px 8px;text-align:center;cursor:pointer;
  transition:border-color 0.18s, transform 0.18s;
  position:relative;
  will-change: transform;
  contain: layout style paint;
}
.codex-champ-card:not(.codex-locked) {
  border-color: rgba(255,215,0,0.45);
}
.codex-champ-card:hover { border-color:rgba(255,215,0,0.75); transform:scale(1.04); }
.codex-locked { cursor:default; border-color:rgba(255,255,255,0.08) !important; box-shadow:0 2px 8px rgba(0,0,0,0.4) !important; }
.codex-locked:hover { border-color:rgba(255,255,255,0.08) !important; transform:none !important; }
.codex-lock-icon {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-65%);
  font-size:1.4rem;pointer-events:none;
}
.codex-champ-img { width:80px;height:80px;border-radius:10px;object-fit:cover;display:block;margin:0 auto 6px; }
.codex-champ-name { font-size:0.58rem;color:rgba(255,255,255,0.7);line-height:1.3;font-weight:600; }
.codex-champ-tier { font-size:0.5rem;letter-spacing:1px;text-transform:uppercase;margin-top:2px; }
.codex-champ-cnt  { font-size:0.58rem;color:rgba(255,215,0,0.65);font-weight:700;margin-top:3px; }
.codex-champ-stars { font-size:0.65rem;color:#FFD700;margin-top:2px; }

/* ── WARBAND FIELD GRID (Barracks) ───────────────────────────── */
.wb-field-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.wb-field-group { display:flex;flex-direction:column;gap:3px; }
.wb-field-label { font-size:0.62rem;color:rgba(255,215,0,0.5);letter-spacing:1px;text-transform:uppercase;font-weight:700; }
.wb-field-input {
  padding:7px 10px;background:rgba(0,0,0,0.3);border:1px solid rgba(255,215,0,0.15);
  border-radius:7px;color:rgba(255,215,0,0.85);font-size:0.82rem;font-family:inherit;outline:none;
  transition:border-color 0.15s;
}
.wb-field-input:focus { border-color:rgba(255,215,0,0.4); }
.wb-field-input option { background:#0a0814; color:rgba(255,215,0,0.9); }

/* ── FUSION PORTAL ───────────────────────────────────────────── */
.fusion-portal-row {
  display:flex;align-items:center;gap:12px;padding:10px;
  background:rgba(120,60,220,0.07);border:1px solid rgba(140,80,255,0.2);border-radius:10px;
  cursor:pointer;transition:all 0.2s;
}
.fusion-portal-row:hover { border-color:rgba(180,120,255,0.5);background:rgba(120,60,220,0.12); }
.fusion-portal-img { width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(140,80,255,0.4);flex-shrink:0; }
.fusion-portal-title { font-size:0.82rem;font-weight:700;color:#c8aaff;margin-bottom:3px; }
.fusion-portal-sub { font-size:0.62rem;color:rgba(200,170,255,0.55);line-height:1.5; }
.fusion-portal-text { flex:1;min-width:0; }

/* ── ACHIEVEMENTS / HONOURS ──────────────────────────────────── */
.achieve-category { margin-bottom:20px; }
.achieve-cat-header {
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:rgba(255,215,0,0.04);border:1px solid rgba(255,215,0,0.12);
  border-radius:10px;margin-bottom:10px;
}
.achieve-cat-icon  { font-size:1rem;flex-shrink:0; }
.achieve-cat-title { font-size:0.75rem;font-weight:800;color:rgba(255,215,0,0.85);letter-spacing:1px;text-transform:uppercase;flex:1; }
.achieve-cat-sub   { font-size:0.58rem;color:rgba(255,255,255,0.3);text-align:right; }
.achieve-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px; }
.achieve-section-title { font-size:0.62rem;letter-spacing:2px;color:rgba(255,215,0,0.45);text-transform:uppercase;margin:12px 0 8px; }
.achieve-card {
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;padding:10px 6px 8px;transition:border-color 0.15s;
}
.achieve-card:hover { border-color:rgba(255,215,0,0.22); }
.achieve-card.claimed { opacity:0.5; }
.achieve-card-chest { width:52px;height:52px;object-fit:cover;border-radius:7px;margin-bottom:6px;flex-shrink:0; }
.achieve-card-title { font-size:0.62rem;font-weight:700;color:rgba(255,255,255,0.82);line-height:1.3;margin-bottom:3px; }
.achieve-card-prog  { font-size:0.55rem;color:rgba(255,255,255,0.6);line-height:1.3;margin-bottom:5px;flex:1; }
.achieve-card-badge { font-size:0.55rem;padding:2px 8px;border-radius:5px;font-weight:700;white-space:nowrap; }
.achieve-card-badge.claimed { background:rgba(0,200,80,0.12);color:#00e070;border:1px solid rgba(0,200,80,0.25); }
.achieve-card-badge.locked  { background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.2); }

/* ── BATTLE ANALYTICS ─────────────────────────────────────────── */
.stats-win-bar { display:flex;height:8px;border-radius:6px;overflow:hidden;gap:2px;margin-top:4px; }
.stats-win-seg.wins   { background:rgba(80,220,120,0.6);border-radius:6px 0 0 6px; }
.stats-win-seg.be     { background:rgba(255,200,0,0.4); }
.stats-win-seg.losses { background:rgba(255,80,80,0.5);border-radius:0 6px 6px 0; }
.analytics-assets { display:flex;flex-direction:column;gap:5px; }
.analytics-asset-row { display:flex;align-items:center;gap:7px;font-size:0.68rem; }
.analytics-asset-name { width:50px;flex-shrink:0;color:rgba(255,255,255,0.65);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.analytics-asset-bar-wrap { flex:1;height:6px;background:rgba(255,255,255,0.06);border-radius:4px;overflow:hidden; }
.analytics-asset-bar { height:100%;border-radius:4px;transition:width 0.4s; }
.analytics-asset-wr { width:30px;flex-shrink:0;text-align:right;color:rgba(255,255,255,0.45); }
.analytics-asset-r  { width:40px;flex-shrink:0;text-align:right;font-weight:700; }
.analytics-wb-table { display:flex;flex-direction:column;gap:5px; }
.analytics-wb-row { display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:0.65rem;padding:6px 8px;background:rgba(255,255,255,0.02);border-radius:7px; }
.analytics-wb-name { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,0.7); }

/* ══════════════════════════════════════════════════════════════════
   THE SANCTUM
   ══════════════════════════════════════════════════════════════════ */

#panelSanctum .dome-panel-inner.sanctum-inner {
  max-width: min(82vw, 1020px);
}

/* Intro block */
.sanctum-intro {
  margin-bottom: 18px;
  padding: 18px 20px;
  background: rgba(255,215,0,0.03);
  border: 1px solid rgba(255,215,0,0.1);
  border-radius: 12px;
}
.sanctum-intro-quote {
  font-size: 0.92rem;
  font-style: italic;
  color: rgba(255,215,0,0.7);
  line-height: 1.75;
  text-align: center;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,215,0,0.08);
}
.sanctum-intro-text {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.8;
  margin: 0;
}

/* Scrolls — accordion */
.sanctum-scrolls { display: block; margin-bottom: 20px; }

.sanctum-scroll {
  border: 1px solid rgba(255,215,0,0.1);
  border-radius: 11px;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}
.sanctum-scroll.open { border-color: rgba(255,215,0,0.28); }

.sanctum-scroll-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  background: rgba(255,215,0,0.03);
  border-radius: 11px;
  transition: background 0.18s;
  user-select: none;
}
.sanctum-scroll-header:hover { background: rgba(255,215,0,0.07); }
.sanctum-scroll.open .sanctum-scroll-header {
  background: rgba(255,215,0,0.06);
  border-radius: 11px 11px 0 0;
  border-bottom: 1px solid rgba(255,215,0,0.1);
}

.sanctum-scroll-num {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 900;
  color: rgba(255,215,0,0.7);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-style: italic;
}
.sanctum-scroll.open .sanctum-scroll-num { background: rgba(255,215,0,0.12); color: #FFD700; }

.sanctum-scroll-title {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  transition: color 0.18s;
}
.sanctum-scroll.open .sanctum-scroll-title { color: rgba(255,215,0,0.9); }

.sanctum-scroll-chevron {
  font-size: 0.9rem;
  color: rgba(255,215,0,0.35);
  transition: transform 0.22s, color 0.18s;
  flex-shrink: 0;
}
.sanctum-scroll.open .sanctum-scroll-chevron { transform: rotate(180deg); color: rgba(255,215,0,0.65); }

/* Scroll body — block layout avoids flex rendering glitches */
.sanctum-scroll-body {
  display: none;
  padding: 20px 20px 22px;
}
.sanctum-scroll.open .sanctum-scroll-body { display: block; }

.sanctum-scroll-body p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.82;
  margin: 0 0 12px 0;
}
.sanctum-scroll-body p:last-child { margin-bottom: 0; }
.sanctum-scroll-body strong { color: rgba(255,215,0,0.85); font-weight: 700; }

/* Callout box */
.sanctum-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgba(255,215,0,0.04);
  border: 1px solid rgba(255,215,0,0.15);
  border-left: 3px solid rgba(255,215,0,0.45);
  border-radius: 9px;
  font-size: 0.83rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  margin-bottom: 12px;
}
.sanctum-callout:last-child { margin-bottom: 0; }
.sanctum-callout-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: 2px; }
.sanctum-callout strong { color: rgba(255,215,0,0.8); }

/* Pillar blocks */
.sanctum-pillar {
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  margin-bottom: 10px;
}
.sanctum-pillar:last-child { margin-bottom: 0; }
.sanctum-pillar-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,215,0,0.65);
  margin-bottom: 8px;
}
.sanctum-pillar p {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.8;
  margin: 0;
}

/* Translation table */
.sanctum-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid rgba(255,215,0,0.12); margin-bottom: 4px; }
.sanctum-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.sanctum-table thead tr { background: rgba(255,215,0,0.07); }
.sanctum-table th {
  padding: 11px 16px;
  text-align: left;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,215,0,0.6);
  border-bottom: 1px solid rgba(255,215,0,0.12);
}
.sanctum-table td {
  padding: 10px 16px;
  color: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: top;
  line-height: 1.55;
}
.sanctum-table tbody tr:last-child td { border-bottom: none; }
.sanctum-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.sanctum-table td:first-child { color: rgba(255,215,0,0.8); font-weight: 700; white-space: nowrap; }

/* Step list (Scroll VII) */
.sanctum-step-list { display: block; }
.sanctum-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  margin-bottom: 10px;
}
.sanctum-step:last-child { margin-bottom: 0; }
.sanctum-step-num {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: rgba(255,215,0,0.5);
  background: rgba(255,215,0,0.07);
  border: 1px solid rgba(255,215,0,0.18);
  border-radius: 7px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sanctum-step-body { display: block; flex: 1; }
.sanctum-step-body strong { font-size: 0.82rem; color: rgba(255,215,0,0.8); font-weight: 700; display: block; margin-bottom: 5px; }
.sanctum-step-body span { font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.75; }

/* Disclaimer */
.sanctum-disclaimer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  line-height: 1.7;
}
.sanctum-disclaimer-icon { flex-shrink: 0; font-size: 0.85rem; color: rgba(255,255,255,0.22); margin-top: 1px; }