/* ============================================================
   BULLIONIS — Premium Dark Gold Financial Theme
   v11 | bullionis.com
   Replaces style.css entirely.
   ============================================================ */

/* ── 1. GOOGLE FONTS ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;600;700;800&display=swap');

/* ── 2. RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
ul, ol { list-style: none; }
a { text-decoration: none; }
table { border-collapse: collapse; }

/* ── 3. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Backgrounds — layered from darkest to lightest */
  --bg:         #08090d;
  --bg-alt:     #0b0d14;
  --surface:    #10131e;
  --surface-2:  #141829;
  --surface-3:  #1a1f34;

  /* Borders */
  --border:     #1e2440;
  --border-2:   #28304f;

  /* ── GOLD palette ──────────────────────────────── */
  --gold:         #d4a843;
  --gold-light:   #ecc96e;
  --gold-dark:    #a07828;
  --gold-xdark:   #7a5c1e;
  --gold-muted:   rgba(212, 168, 67, 0.14);
  --gold-glow:    0 0 20px rgba(212, 168, 67, 0.22);
  --gold-glow-sm: 0 0 8px  rgba(212, 168, 67, 0.14);

  /* Semantic accent aliases */
  --accent:      var(--gold);
  --accent-2:    var(--gold-light);

  /* Text */
  --fg:         #dde3ef;
  --fg-muted:   #7a859a;
  --fg-dim:     #48516a;

  /* Status */
  --green:      #22cc7a;
  --red:        #e8364f;
  --amber:      #e8a030;
  --blue:       #38b6e8;
  --purple:     #8b6ff7;

  /* Geometry */
  --radius:     5px;
  --radius-lg:  9px;
  --radius-xl:  14px;

  /* Transitions */
  --t-fast: 0.12s ease;
  --t-med:  0.22s ease;
}

/* ── 4. BASE ──────────────────────────────────────────────── */
body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: 'Space Mono', 'Courier New', monospace;
  line-height: 1.68;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Subtle gold vignette at top */
  background-image: radial-gradient(
    ellipse 80% 45% at 50% -15%,
    rgba(212, 168, 67, 0.045) 0%,
    transparent 60%
  );
  background-attachment: fixed;
}

main { flex: 1; }

/* ── 5. TYPOGRAPHY ────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Syne', 'Space Mono', sans-serif;
  font-weight: 700;
  line-height: 1.22;
  color: var(--fg);
}
h1 { font-size: 1.8rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .88rem; }

p { margin-bottom: .7rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold); transition: color var(--t-fast); }
a:hover { color: var(--gold-light); }

code, .mono {
  font-family: 'Space Mono', monospace;
  font-size: .86em;
  background: rgba(212, 168, 67, .08);
  color: var(--gold-light);
  padding: .08em .35em;
  border-radius: 3px;
}

strong { font-weight: 700; }

.muted     { color: var(--fg-muted); }
.dim       { color: var(--fg-dim); }
.small     { font-size: .78rem; }
.text-gold  { color: var(--gold); }
.text-green { color: var(--green); }
.text-red   { color: var(--red); }
.text-amber { color: var(--amber); }
.text-blue  { color: var(--blue); }
.text-muted { color: var(--fg-muted); }

.page-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--fg);
  margin-bottom: .25rem;
}
.page-sub {
  color: var(--fg-muted);
  font-size: .82rem;
  margin-bottom: 1.8rem;
}
.section-heading {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--gold);
  padding-bottom: .45rem;
  margin-bottom: 1rem;
  margin-top: 2rem;
  border-bottom: 1px solid var(--border);
}

/* ── 6. LAYOUT ────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.6rem;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr;         gap: 1.4rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 1.4rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr);  gap: 1rem; }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.6rem 0;
}

/* ── 7. NAVIGATION ────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(8, 9, 13, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  /* Subtle gold underline on the header */
  box-shadow: 0 1px 0 rgba(212, 168, 67, 0.1), 0 4px 24px rgba(0,0,0,.5);
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.6rem;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

/* Logo: ◆ diamond added via CSS, text from APP_NAME in PHP */
.logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
  transition: color var(--t-fast), filter var(--t-fast);
}
.logo::before {
  content: '◆';
  font-size: .8em;
  opacity: .9;
}
.logo:hover { color: var(--gold-light); filter: drop-shadow(0 0 6px rgba(212,168,67,.4)); }

.main-nav {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.main-nav::-webkit-scrollbar { display: none; }

.main-nav a {
  color: var(--fg-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  padding: .38rem .7rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
  position: relative;
}
.main-nav a:hover {
  color: var(--fg);
  background: rgba(255,255,255,.05);
}

/* "My Empire" CTA link */
.main-nav a.nav-empire {
  color: var(--gold);
  background: rgba(212,168,67,.09);
  border: 1px solid rgba(212,168,67,.22);
}
.main-nav a.nav-empire:hover {
  background: rgba(212,168,67,.17);
  border-color: rgba(212,168,67,.4);
  color: var(--gold-light);
}

/* Admin link */
.main-nav a.nav-admin {
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.main-nav a.nav-admin:hover {
  color: var(--amber);
  border-color: var(--amber);
}

/* Logout / dim links */
.main-nav a.nav-dim { color: var(--fg-dim); }
.main-nav a.nav-dim:hover { color: var(--fg-muted); }

/* Notification badge */
.nav-notif {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1;
}

/* Daily reward gift indicator */
.nav-gift { margin-right: 2px; font-style: normal; }

/* ── 8. FOOTER ────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: .9rem 1.6rem;
  margin-top: auto;
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  font-size: .7rem;
  color: var(--fg-dim);
}
.footer-inner span:first-child {
  color: var(--gold-dark);
  font-weight: 700;
  letter-spacing: .04em;
}

/* ── 9. CARDS ─────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.5rem;
  transition: border-color var(--t-med), box-shadow var(--t-med);
  position: relative;
}
.card:hover {
  border-color: rgba(212,168,67,.28);
  box-shadow: var(--gold-glow);
}
.card-accent { border-top: 2px solid var(--gold); }
.card-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-muted);
  margin-bottom: .5rem;
}
.card-value {
  font-family: 'Space Mono', monospace;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.1;
}

/* KPI stat cards */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.3rem;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-xdark), var(--gold), var(--gold-light), var(--gold));
}
.stat-card .stat-label {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-muted);
  margin-bottom: .35rem;
}
.stat-card .stat-value {
  font-family: 'Space Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.1;
}
.stat-card .stat-delta {
  font-size: .72rem;
  margin-top: .2rem;
  color: var(--fg-muted);
}
.stat-card .stat-icon {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  opacity: .15;
}

/* Premium hero panel */
.hero-panel {
  background: linear-gradient(140deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.hero-panel::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(212,168,67,.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Glassmorphism panels */
.glass {
  background: rgba(16, 19, 30, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212,168,67,.16);
  border-radius: var(--radius-lg);
}

/* ── 10. BUTTONS ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .52rem 1.15rem;
  border-radius: var(--radius);
  font-family: 'Space Mono', monospace;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--t-fast);
  white-space: nowrap;
  user-select: none;
}
.btn:disabled { opacity: .45; pointer-events: none; }

/* Gold gradient primary */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
  color: #090a0d;
  border-color: var(--gold-dark);
}
.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 18px rgba(212,168,67,.35);
  color: #090a0d;
}
.btn-primary:active { filter: brightness(.94); transform: translateY(1px); }

/* Outline secondary */
.btn-outline {
  background: transparent;
  color: var(--fg-muted);
  border-color: var(--border-2);
}
.btn-outline:hover {
  color: var(--fg);
  border-color: rgba(212,168,67,.45);
  background: rgba(212,168,67,.05);
}

/* Danger */
.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: rgba(232,54,79,.35);
}
.btn-danger:hover {
  background: rgba(232,54,79,.1);
  border-color: var(--red);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--fg-dim);
  border-color: transparent;
}
.btn-ghost:hover { background: rgba(255,255,255,.04); color: var(--fg-muted); }

/* Sizes */
.btn-sm  { padding: .28rem .65rem; font-size: .66rem; }
.btn-lg  { padding: .72rem 1.8rem; font-size: .86rem; }
.btn-block { width: 100%; justify-content: center; }

/* ── 11. FORMS ────────────────────────────────────────────── */
.form-wrap {
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.form-wrap-wide { max-width: 680px; }

.form-group   { margin-bottom: 1.1rem; }
.form-row     { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-actions { margin-top: 1.4rem; display: flex; gap: .7rem; align-items: center; }

.form-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-muted);
  margin-bottom: .38rem;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--fg);
  padding: .6rem .9rem;
  font-family: 'Space Mono', monospace;
  font-size: .82rem;
  line-height: 1.5;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
  appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,168,67,.12);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--fg-dim); }
.form-textarea { resize: vertical; min-height: 100px; }

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a859a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}

.form-hint {
  font-size: .72rem;
  color: var(--fg-dim);
  margin-top: .3rem;
}
.form-error {
  font-size: .72rem;
  color: var(--red);
  margin-top: .3rem;
}

/* Range slider */
input[type="range"] {
  width: 100%;
  height: 4px;
  background: var(--border-2);
  border-radius: 2px;
  border: none;
  box-shadow: none;
  padding: 0;
  cursor: pointer;
  accent-color: var(--gold);
}

/* Checkbox / radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--gold);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ── 12. TABLES ───────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.data-table thead tr {
  border-bottom: 1px solid var(--border);
}
.data-table th {
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
  padding: .6rem .9rem;
  text-align: left;
  white-space: nowrap;
}
.data-table td {
  padding: .65rem .9rem;
  border-bottom: 1px solid rgba(30, 36, 64, .7);
  color: var(--fg);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--t-fast); }
.data-table tbody tr:hover td { background: rgba(212,168,67,.04); }

/* Rank colours */
.data-table .rank-1 td,
.data-table .rank-1 { color: var(--gold); font-weight: 700; }
.data-table .rank-2 td,
.data-table .rank-2 { color: var(--fg-muted); }
.data-table .rank-3 td,
.data-table .rank-3 { color: #c06840; }

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* FIX (mobile audit): overflow:hidden was CLIPPING wide tables on
     narrow screens instead of allowing horizontal scroll — content
     was silently cut off rather than reachable. overflow-x:auto lets
     the table scroll within its own box; overflow-y stays visible so
     dropdowns/tooltips inside cells aren't clipped vertically. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap .data-table tr:last-child td { border-bottom: none; }
.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.table-header h3 { font-size: .9rem; margin: 0; }

/* ── 13. BADGES ───────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .14rem .52rem;
  border-radius: 3px;
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  vertical-align: middle;
  border: 1px solid;
  white-space: nowrap;
}
.badge-pos     { background: rgba(34,204,122,.1);   color: var(--green);  border-color: rgba(34,204,122,.28); }
.badge-neg     { background: rgba(232,54,79,.1);    color: var(--red);    border-color: rgba(232,54,79,.28); }
.badge-gold    { background: rgba(212,168,67,.12);  color: var(--gold);   border-color: rgba(212,168,67,.3); }
.badge-amber   { background: rgba(232,160,48,.1);   color: var(--amber);  border-color: rgba(232,160,48,.28); }
.badge-blue    { background: rgba(56,182,232,.1);   color: var(--blue);   border-color: rgba(56,182,232,.28); }
.badge-purple  { background: rgba(139,111,247,.1);  color: var(--purple); border-color: rgba(139,111,247,.28); }
.badge-neutral { background: rgba(122,133,154,.1);  color: var(--fg-muted); border-color: var(--border-2); }

/* Role badges */
.role-admin   { background: rgba(232,160,48,.12);  color: var(--amber); border-color: rgba(232,160,48,.3); }
.role-founder { background: rgba(212,168,67,.12);  color: var(--gold);  border-color: rgba(212,168,67,.3); }
.role-owner   { background: rgba(139,111,247,.1);  color: var(--purple); border-color: rgba(139,111,247,.28); }
.role-member  { background: rgba(122,133,154,.1);  color: var(--fg-muted); border-color: var(--border-2); }

/* ── 14. FLASH MESSAGES ───────────────────────────────────── */
.flash {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.2rem;
  font-size: .82rem;
  font-weight: 600;
  border: 1px solid;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  animation: fadeIn .2s ease;
}
.flash::before { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.flash-ok    { background: rgba(34,204,122,.08);  border-color: rgba(34,204,122,.3); color: var(--green); }
.flash-ok::before { content: '✓'; }
.flash-error { background: rgba(232,54,79,.08);   border-color: rgba(232,54,79,.3);  color: var(--red); }
.flash-error::before { content: '✗'; }
.flash-warn  { background: rgba(232,160,48,.08);  border-color: rgba(232,160,48,.3); color: var(--amber); }
.flash-warn::before { content: '⚠'; }

/* ── 15. METER BARS ───────────────────────────────────────── */
.meter {
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  height: 5px;
  margin-top: .4rem;
}
.meter-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  transition: width .4s ease;
}
.meter-fill.green  { background: var(--green); }
.meter-fill.red    { background: var(--red); }
.meter-fill.amber  { background: var(--amber); }
.meter-fill.blue   { background: var(--blue); }
.meter-fill.purple { background: var(--purple); }

/* Meter with label */
.meter-wrap { margin-bottom: .6rem; }
.meter-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .3rem;
}
.meter-meta .meter-name { font-size: .74rem; color: var(--fg-muted); }
.meter-meta .meter-val  { font-size: .74rem; font-weight: 700; color: var(--fg); font-family: 'Space Mono', monospace; }

/* ── 16. STOCK / MARKET COMPONENTS ───────────────────────── */
.stock-up   { color: var(--green); }
.stock-down { color: var(--red); }
.stock-neutral { color: var(--fg-muted); }

.price-display {
  font-family: 'Space Mono', monospace;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: .02em;
}

.ticker-tag {
  display: inline-block;
  background: rgba(212,168,67,.1);
  border: 1px solid rgba(212,168,67,.25);
  color: var(--gold);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .1rem .45rem;
  border-radius: 3px;
  text-transform: uppercase;
}

.entity-type-label {
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-dim);
}

/* Entity / company card */
.entity-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.3rem;
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.entity-card:hover {
  border-color: rgba(212,168,67,.28);
  box-shadow: var(--gold-glow-sm);
}
.entity-card .ec-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .7rem;
}
.entity-card .ec-name { font-weight: 700; font-size: .9rem; color: var(--fg); }
.entity-card .ec-meta { font-size: .72rem; color: var(--fg-muted); margin-top: .1rem; }
.entity-card .ec-price {
  font-family: 'Space Mono', monospace;
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
}

/* Entity header (entity detail page) */
.entity-header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.entity-avatar {
  width: 64px; height: 64px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--gold-xdark), rgba(212,168,67,.25));
  border: 1px solid rgba(212,168,67,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
}

/* ── 17. ADMIN LAYOUT ─────────────────────────────────────── */
.admin-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: calc(100vh - 54px);
}

.admin-sidebar {
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  padding: 1.3rem 0;
  position: sticky;
  top: 54px;
  height: calc(100vh - 54px);
  overflow-y: auto;
  overflow-x: hidden;
}
.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: var(--border-2); }

.admin-sidebar-title {
  font-family: 'Syne', sans-serif;
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gold);
  padding: 0 1.2rem .9rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .5rem;
}

.admin-nav-link {
  display: block;
  padding: .52rem 1.2rem;
  color: var(--fg-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.admin-nav-link:hover {
  color: var(--fg);
  background: rgba(255,255,255,.04);
  border-left-color: var(--border-2);
}
.admin-nav-active {
  color: var(--gold) !important;
  background: rgba(212,168,67,.08) !important;
  border-left-color: var(--gold) !important;
}

.admin-main { overflow: auto; }
.admin-container { max-width: 1100px; padding: 2rem; }

/* Admin KPI strip */
.admin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

/* ── 18. NOTIFICATIONS ────────────────────────────────────── */
.notification-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: .5rem;
  font-size: .8rem;
  color: var(--fg-muted);
  transition: border-color var(--t-fast);
}
.notification-item.unread {
  border-color: rgba(212,168,67,.25);
  background: rgba(212,168,67,.04);
  color: var(--fg);
}

/* ── 19. GUILD COMPONENTS ─────────────────────────────────── */
.guild-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(212,168,67,.08);
  border: 1px solid rgba(212,168,67,.22);
  border-radius: var(--radius);
  padding: .28rem .7rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold);
}

.guild-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.guild-card:hover {
  border-color: rgba(212,168,67,.28);
  box-shadow: var(--gold-glow-sm);
}

/* ── 20. CHARTS ───────────────────────────────────────────── */
.chart-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  position: relative;
}
.chart-wrap canvas { display: block; }

/* ── 21. LEADERBOARD ──────────────────────────────────────── */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 700;
  background: var(--surface-3);
  color: var(--fg-muted);
  flex-shrink: 0;
}
.rank-badge.rank-1 { background: linear-gradient(135deg, #b07818, #e8c050); color: #090a0d; }
.rank-badge.rank-2 { background: linear-gradient(135deg, #808080, #bebebe); color: #090a0d; }
.rank-badge.rank-3 { background: linear-gradient(135deg, #a06030, #d09060); color: #090a0d; }

/* ── 22. MISSIONS ─────────────────────────────────────────── */
.mission-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  margin-bottom: .7rem;
  transition: border-color var(--t-med);
}
.mission-card.completed {
  border-color: rgba(34,204,122,.25);
  background: rgba(34,204,122,.03);
}
.mission-card.claimed { opacity: .55; }
.mission-card .mc-title {
  font-weight: 700;
  font-size: .88rem;
  margin-bottom: .2rem;
}
.mission-card .mc-desc {
  font-size: .76rem;
  color: var(--fg-muted);
  margin-bottom: .6rem;
}
.mission-card .mc-reward {
  font-size: .72rem;
  color: var(--gold);
  font-weight: 700;
}

/* FIX M-08: Mission board responsive grid */
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  align-items: start;
}

/* ── 23. HEADQUARTERS ─────────────────────────────────────── */
.hq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.1rem;
}
.hq-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  transition: border-color var(--t-med);
}
.hq-card:hover { border-color: rgba(212,168,67,.28); }
.hq-card .hq-icon { font-size: 1.5rem; margin-bottom: .5rem; }
.hq-card .hq-name { font-weight: 700; font-size: .88rem; margin-bottom: .2rem; }
.hq-card .hq-level {
  font-size: .72rem;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: .6rem;
}

/* ── 24. EMPTY STATE ──────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--fg-dim);
  font-size: .85rem;
}
.empty-state .empty-icon {
  font-size: 2.2rem;
  margin-bottom: .6rem;
  opacity: .45;
}
.empty-state p { color: var(--fg-muted); }

/* ── 25. CEO REPUTATION ───────────────────────────────────── */
.ceo-tier-legendary { color: var(--gold); }
.ceo-tier-trusted   { color: var(--green); }
.ceo-tier-stable    { color: var(--fg-muted); }
.ceo-tier-shaky     { color: var(--amber); }
.ceo-tier-distrusted{ color: var(--red); }

/* ── 26. NEWS ITEM ────────────────────────────────────────── */
.news-item {
  padding: .9rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 1rem;
}
.news-item:last-child { border-bottom: none; }
.news-item .ni-sentiment {
  flex-shrink: 0;
  width: 20px;
  font-size: .9rem;
  padding-top: .1rem;
}
.news-item .ni-title {
  font-weight: 700;
  font-size: .84rem;
  margin-bottom: .2rem;
  color: var(--fg);
}
.news-item .ni-meta {
  font-size: .72rem;
  color: var(--fg-dim);
}

/* ── 27. PORTFOLIO ────────────────────────────────────────── */
.portfolio-value {
  font-family: 'Space Mono', monospace;
  font-size: 2rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1;
  margin-bottom: .3rem;
}
.portfolio-delta {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* ── 28. UTILITIES ────────────────────────────────────────── */
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.font-mono    { font-family: 'Space Mono', monospace; }
.fw-bold      { font-weight: 700; }
.d-flex       { display: flex; }
.d-grid       { display: grid; }
.align-center { align-items: center; }
.align-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end  { justify-content: flex-end; }
.gap-1        { gap: .4rem; }
.gap-2        { gap: .8rem; }
.gap-3        { gap: 1.4rem; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.w-100        { width: 100%; }
.mw-100       { max-width: 100%; }
.overflow-auto{ overflow: auto; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.p-0  { padding: 0; }

.hidden   { display: none !important; }
.sr-only  { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── 29. SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-dim); }
* { scrollbar-width: thin; scrollbar-color: var(--border-2) var(--bg); }

/* ── 30. SELECTION ────────────────────────────────────────── */
::selection { background: rgba(212,168,67,.22); color: var(--fg); }

/* ── 31. FOCUS VISIBLE ────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── 32. ANIMATIONS ───────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(212,168,67,.1); }
  50%       { box-shadow: 0 0 22px rgba(212,168,67,.32); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.animate-in   { animation: fadeIn .22s ease; }
.gold-pulse   { animation: goldPulse 2.5s ease-in-out infinite; }

/* Loading shimmer for skeleton states */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius);
  color: transparent !important;
}

/* ── 33. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 960px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: .5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }
  .admin-sidebar-title { display: none; }
  .admin-nav-link {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: .5rem .9rem;
    font-size: .68rem;
  }
  .admin-nav-link:hover    { border-bottom-color: var(--border-2); border-left: none; }
  .admin-nav-active        { border-bottom-color: var(--gold) !important; border-left: none !important; background: transparent !important; }
  .grid-3, .grid-4         { grid-template-columns: 1fr 1fr; }
  .admin-kpis              { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  html           { font-size: 13px; }
  .header-inner  { padding: 0 1rem; gap: 1rem; }
  .container     { padding: 1.2rem 1rem; }
  .grid-2,
  .grid-3,
  .grid-4        { grid-template-columns: 1fr; }
  .admin-kpis    { grid-template-columns: 1fr; }
  /* FIX M-08: mission board collapses on mobile */
  .mission-grid  { grid-template-columns: 1fr !important; }
  .main-nav a    { padding: .32rem .5rem; font-size: .66rem; }
  .logo          { font-size: .88rem; }
  .page-title    { font-size: 1.3rem; }
  .form-wrap     { padding: 1.25rem 1rem; }
  .form-row      { grid-template-columns: 1fr; }
  .data-table    { font-size: .74rem; }
  .data-table th,
  .data-table td { padding: .5rem .6rem; }
  .entity-header { flex-direction: column; }
  .hero-panel    { padding: 1.25rem; }
  .stat-card .stat-value { font-size: 1.2rem; }
  .portfolio-value       { font-size: 1.5rem; }
  .btn-lg        { padding: .6rem 1.4rem; font-size: .8rem; }
  .hq-grid       { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .main-nav a    { font-size: .62rem; padding: .28rem .38rem; }
}

/* ── 34. PRINT ────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .admin-sidebar,
  .btn, .flash, .main-nav { display: none !important; }
  body, .card, .stat-card { background: white !important; color: black !important; }
  .data-table td, .data-table th { border-color: #ccc !important; }
}

/* ============================================================
   RC2 COMPONENT EXTENSIONS — all classes used in templates
   ============================================================ */

/* ── Stat-card colour aliases (templates use: stat-card green/red/amber) ── */
.stat-card.green::before  { background: var(--green); }
.stat-card.red::before    { background: var(--red); }
.stat-card.amber::before  { background: var(--amber); }
.stat-card.blue::before   { background: var(--blue); }
.stat-card.green .stat-value { color: var(--green); }
.stat-card.red   .stat-value { color: var(--red); }

/* ── stat-grid (alias for kpi-grid used in index.php / dashboard) ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}

/* ── Layout helpers ─── */
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.lower-cols   { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; align-items:start; }

/* ── Mobile audit additions ──────────────────────────────────
   These replace inline grid-template-columns declarations that were
   found scattered across templates. Inline styles can't respond to
   @media queries, so any inline multi-column grid silently ignored
   every responsive breakpoint below — this was the root cause of
   squeezed/overflowing layouts on phones across several pages. */

/* Fixed 3-column stat/KPI row: 3 → 2 → 1 as the viewport narrows */
.stat-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }

/* Main content + fixed-width sidebar (member lists, email settings,
   crisis detail, stock hero, guild page) — stacks below ~880px */
.content-sidebar { display:grid; grid-template-columns:1fr 300px; gap:1.6rem; align-items:start; }

/* Dashboard's 2 content columns + 1 fixed sidebar (index.php) */
.dashboard-3col { display:grid; grid-template-columns:1fr 1fr 300px; gap:1.4rem; align-items:start; }

/* Hero header: flexible title block + auto-sized action/badge cluster */
.hero-auto-grid { display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:start; margin-bottom:1.5rem; }

/* Head-to-head comparison banner: user | VS | user */
.vs-compare-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center; }

/* Inline create-guild form: name (wide) | tag (narrow) | submit button */
.guild-create-grid { display:grid; grid-template-columns:2fr 1fr auto; gap:.8rem; align-items:end; }
.mb1          { margin-bottom:.5rem; }
.neg          { color: var(--red); }
.icon         { font-style:normal; display:inline-block; }

/* ── Entity command card (dashboard) ─── */
.entity-command-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 1.2rem;
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.entity-command-card:hover { border-color: rgba(212,168,67,.28); }

.ecmd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--border);
}
@media(max-width:640px){ .ecmd-header { flex-direction:column; } }

.ecmd-title-group { flex: 1; min-width: 0; }
.ecmd-name {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
  margin: .3rem 0 .15rem;
  transition: color var(--t-fast);
}
.ecmd-name:hover { color: var(--gold-light); }

.ecmd-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: .6rem;
  flex-shrink: 0;
}
@media(max-width:800px){ .ecmd-stats { grid-template-columns: repeat(2,1fr); } }

.ecmd-stat { text-align: center; }
.ecmd-stat-label {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--fg-dim);
  margin-bottom: .15rem;
}
.ecmd-stat-value {
  font-family: 'Space Mono', monospace;
  font-size: .92rem;
  font-weight: 700;
  color: var(--fg);
}

.ecmd-xp-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.3rem;
  background: rgba(255,255,255,.018);
  border-bottom: 1px solid var(--border);
}

.ecmd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .8rem 1.3rem;
}

/* ── Action buttons ─── */
.btn-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .45rem .75rem;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--fg);
  font-family: 'Space Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast);
  min-width: 78px;
  text-align: center;
}
.btn-action:hover {
  border-color: var(--gold);
  background: rgba(212,168,67,.08);
  color: var(--gold-light);
}
.btn-action-disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.action-form { display: inline-flex; }
.action-cost {
  font-size: .62rem;
  color: var(--red);
  font-weight: 400;
  opacity: .8;
}
.action-cd { font-size: .6rem; font-weight: 400; }
.cd-ready   { color: var(--green); }
.cd-wait    { color: var(--amber); }

/* ── Sabotage panel ─── */
.sabotage-wrap { position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:.35rem; }
.sabotage-panel {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: .5rem;
  display: flex;
  gap: .4rem;
  flex-direction: column;
  min-width: 200px;
}

/* ── Inline badges ─── */
.type-badge {
  display: inline-block;
  padding: .1rem .42rem;
  border-radius: 3px;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid;
}
.shield-badge {
  display: inline-block;
  padding: .1rem .45rem;
  background: rgba(56,184,234,.1);
  border: 1px solid rgba(56,184,234,.3);
  color: var(--blue);
  font-size: .62rem;
  font-weight: 700;
  border-radius: 3px;
}
.level-badge {
  display: inline-block;
  padding: .1rem .45rem;
  background: rgba(212,168,67,.12);
  border: 1px solid rgba(212,168,67,.3);
  color: var(--gold);
  font-size: .62rem;
  font-weight: 700;
  border-radius: 3px;
}

/* ── Trend tags ─── */
.trend-tag {
  display: inline-block;
  padding: .1rem .42rem;
  border-radius: 3px;
  font-size: .62rem;
  font-weight: 700;
  border: 1px solid;
}
.trend-up     { color:var(--green); background:rgba(34,204,122,.08); border-color:rgba(34,204,122,.25); }
.trend-down   { color:var(--red);   background:rgba(232,54,79,.08);  border-color:rgba(232,54,79,.25); }
.trend-stable { color:var(--fg-muted);  background:rgba(122,134,156,.08);border-color:var(--border-2); }

/* ── Events list ─── */
.event-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border);
}
.event-item:last-child { border-bottom: none; }
.event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: .35rem;
  flex-shrink: 0;
}
.event-body  { flex: 1; min-width: 0; }
.event-title { font-size: .82rem; font-weight: 700; color: var(--fg); }
.event-meta  { font-size: .7rem; color: var(--fg-dim); margin-top: .1rem; }

/* ── Achievement cards ─── */
.ach-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  transition: border-color var(--t-fast);
}
.ach-card.ach-unlocked { border-color: rgba(212,168,67,.3); }
.ach-icon  { font-size: 1.5rem; flex-shrink: 0; }
.ach-name  { font-weight: 700; font-size: .86rem; margin-bottom: .1rem; }
.ach-body  { font-size: .75rem; color: var(--fg-muted); }
.rarity-common    { color: var(--fg-muted); }
.rarity-rare      { color: var(--blue); }
.rarity-epic      { color: var(--purple); }
.rarity-legendary { color: var(--gold); }

/* ── Leaderboard sort links ─── */
.sort-link {
  color: var(--fg-muted);
  text-decoration: none;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.sort-link:hover, .sort-link.active { color: var(--gold); }

/* ── Market highlights bar ─── */
.highlights-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .65rem 0;
  margin-bottom: 1.2rem;
}
.highlight-item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .32rem .75rem;
  font-size: .76rem;
}
.highlight-gain  { border-color: rgba(34,204,122,.25);  }
.highlight-loss  { border-color: rgba(232,54,79,.25);   }
.highlight-trade { border-color: rgba(212,168,67,.25);  }
.highlight-label { color: var(--fg-muted); font-size: .68rem; }

/* ── Ticker tape ─── */
.ticker-wrap { overflow: hidden; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.ticker-tape { display: flex; gap: 1.6rem; padding: .38rem 0; white-space: nowrap; animation: tickerScroll 30s linear infinite; }
.ticker-tape:hover { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--fg-muted); }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Profile page ─── */
.profile-hero {
  background: linear-gradient(140deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-xdark), rgba(212,168,67,.3));
  border: 2px solid rgba(212,168,67,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}
.profile-info h2 { font-size: 1.3rem; margin-bottom: .3rem; }

/* ── Crisis banner ─── */
.crisis-banner-body {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.3rem;
  background: rgba(232,54,79,.08);
  border: 1px solid rgba(232,54,79,.3);
  border-radius: var(--radius-lg);
  margin-bottom: 1.4rem;
}
.crisis-banner-gutter { flex-shrink: 0; }
.crisis-banner-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--red);
}
.crisis-banner-name { font-weight: 700; font-size: .9rem; color: var(--fg); }
.crisis-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  animation: goldPulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 rgba(232,54,79,.4);
}

/* ── User widget bar ─── */
.user-widget-bar {
  display: flex;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .8rem 1.2rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.uwb-item  { display: flex; flex-direction: column; align-items: center; gap: .1rem; flex: 1; min-width: 80px; }
.uwb-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-dim); }
.uwb-value { font-family: 'Space Mono', monospace; font-size: .9rem; font-weight: 700; color: var(--fg); }
.uwb-daily { border-left: 1px solid var(--border); padding-left: 1rem; }

/* ── meter-num ─── */
.meter-num { font-family: 'Space Mono', monospace; font-size: .72rem; font-weight: 700; color: var(--fg); }

/* ── Portfolio gain/loss row highlight ─── */
tr.highlight-gain td { background: rgba(34,204,122,.04)  !important; }
tr.highlight-loss td { background: rgba(232,54,79,.04)   !important; }

/* ── Responsive addendum ─── */
@media(max-width:768px){
  .lower-cols { grid-template-columns: 1fr; }
  .profile-hero { flex-direction: column; text-align: center; }
  .user-widget-bar { gap: .6rem; }
  .ecmd-actions { gap: .35rem; }
  .btn-action { min-width: 64px; font-size: .64rem; }
}

/* ── Mobile audit: new grid utility collapse rules ─────────── */
@media(max-width:880px){
  .content-sidebar { grid-template-columns: 1fr; }
}
@media(max-width:960px){
  .dashboard-3col { grid-template-columns: 1fr; }
}
@media(max-width:640px){
  .stat-grid-3      { grid-template-columns: 1fr 1fr; gap:.7rem; }
  .hero-auto-grid   { grid-template-columns: 1fr; }
  .vs-compare-grid  { grid-template-columns: 1fr; text-align: center; }
  .guild-create-grid{ grid-template-columns: 1fr; }
}
@media(max-width:420px){
  .stat-grid-3 { grid-template-columns: 1fr; }
}

/* ── Security v14: CSRF-protected logout button ──────────────
   Styled identically to .main-nav a so converting the Logout link
   into a <form><button> for CSRF protection is visually invisible. */
.main-nav form.nav-logout-form { display: inline-flex; margin: 0; padding: 0; }
.main-nav button.nav-link-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--fg-dim);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  padding: .38rem .7rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.main-nav button.nav-link-btn:hover {
  color: var(--fg-muted);
  background: rgba(255,255,255,.05);
}

/* ── Chart audit v16: chart control tabs (previously unstyled) ──
   .chart-tab / .chart-metric-tabs / .chart-range-tabs were used
   throughout entity.php's chart controls (and now stock.php's, via
   the unified chart module) but had NO corresponding CSS anywhere —
   these buttons rendered as bare, unstyled HTML the entire time. */
.chart-metric-tabs,
.chart-range-tabs {
  display: inline-flex;
  gap: .2rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .2rem;
}
.chart-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: .32rem .6rem;
  border-radius: 3px;
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.chart-tab:hover { color: var(--fg); background: rgba(255,255,255,.05); }
.chart-tab.active {
  color: var(--gold);
  background: var(--gold-muted);
}

/* ── General tab navigation (account.php Profile/Email/etc.) ────
   Same underlying issue as above: .tabs/.tab/.tab.active were used
   but never styled — plain unstyled links. */
.tabs {
  display: flex;
  gap: .3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.tab {
  display: inline-block;
  padding: .55rem .9rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }

/* ── Premium badge (v17 — cosmetic placeholder, Part 3) ────────── */
.premium-badge { margin-left: .3rem; font-size: .58rem; padding: .1rem .4rem; }

/* ============================================================
   v19 — DESIGN SYSTEM REFRESH (Part 2: UI/UX redesign)
   ------------------------------------------------------------
   Purely additive: nothing above this line is removed or renamed,
   so every existing page keeps working exactly as before. These
   components exist to let flagship pages (entity, dashboard, admin
   overview) group information into cards/tabs instead of long
   stacks of tables, and to give the brand a more considered,
   "engraved ledger / stock-terminal" texture instead of a flat
   dark+gold fill — the signature motifs are the tabular-figure
   price ticker with its live directional flash, and the hairline
   guilloché-style hero texture (a nod to bullion/banknote
   engraving, restrained to one accent moment per page rather than
   sprinkled everywhere).
   ============================================================ */

/* ── Hero texture: a faint engine-turned/guilloché hairline pattern,
   used once per page behind a hero band. Pure CSS conic gradient,
   no image request, no JS. ─────────────────────────────────────── */
.hero-engraved {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(212,168,67,.07), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
}
.hero-engraved::before {
  content: '';
  position: absolute; inset: 0;
  opacity: .5;
  background-image: repeating-conic-gradient(
    from 0deg at 100% 0%,
    rgba(212,168,67,.05) 0deg 1deg,
    transparent 1deg 6deg
  );
  mask-image: radial-gradient(ellipse 70% 90% at 100% 0%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 100% 0%, black 0%, transparent 70%);
  pointer-events: none;
}
.hero-engraved > * { position: relative; z-index: 1; }

/* ── Ticker: the signature price display ─────────────────────────
   Large tabular-figure price, directional colour, and a compact
   inline sparkline baseline. The flash classes are toggled briefly
   by entity-chart.js / stock pages when a price updates live, so a
   moving market is visible in the UI itself, not just in the data. */
.ticker {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}
.ticker-price {
  font-family: 'Space Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--gold-light);
  letter-spacing: -.01em;
  transition: color var(--t-med);
}
.ticker-change {
  font-family: 'Space Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .95rem;
  padding: .18rem .55rem;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.ticker-change.up   { color: var(--green); background: rgba(34,204,122,.12); }
.ticker-change.down { color: var(--red);   background: rgba(232,54,79,.12); }
.ticker-change.flat { color: var(--fg-muted); background: rgba(122,133,154,.1); }
.ticker-flash-up   { animation: tickerFlashUp   900ms ease; }
.ticker-flash-down { animation: tickerFlashDown 900ms ease; }
@keyframes tickerFlashUp   { 0% { color: var(--green); } 100% { color: var(--gold-light); } }
@keyframes tickerFlashDown { 0% { color: var(--red);   } 100% { color: var(--gold-light); } }

.sparkline { display: block; opacity: .85; }
.sparkline path.spark-fill { opacity: .12; }

/* ── KPI strip: dense horizontal stat row for hero bands — a
   tighter, calmer alternative to scattering .stat-card everywhere. */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  margin-top: 1.1rem;
}
.kpi-strip > div {
  padding: .75rem 1rem;
  border-right: 1px solid var(--border);
}
.kpi-strip > div:last-child { border-right: none; }
.kpi-strip .kpi-label {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fg-dim);
  margin-bottom: .25rem;
}
.kpi-strip .kpi-value {
  font-family: 'Space Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  color: var(--fg);
}

/* ── Panel tabs: zero-JS, radio-driven content switcher. Distinct
   from the existing .tabs/.tab (those are server-rendered nav
   links between pages; these switch panels within one page load).
   REQUIRED ID CONVENTION: radios must use id="t1".."t6" (matching
   label for="t1".. and body data-panel="1"..) — every page that
   uses this component follows this exact convention so the CSS
   below (which must reference concrete IDs, not a dynamic prefix)
   applies uniformly everywhere it's used. */
.panel-tabset { margin-bottom: 1.6rem; }
.panel-tabset input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.panel-tab-labels {
  display: flex;
  gap: .3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.panel-tab-labels::-webkit-scrollbar { display: none; }
.panel-tab-labels label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .6rem .95rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--fg-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.panel-tab-labels label:hover { color: var(--fg); }
.panel-tabset .panel-body { display: none; animation: panelFadeIn var(--t-med); }
@keyframes panelFadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Wiring: each radio's index-matched label + body pair. Supports up
   to 6 tabs per set (t1..t6) — plenty for this app's pages. */
#t1:checked ~ .panel-tab-labels label[for="t1"],
#t2:checked ~ .panel-tab-labels label[for="t2"],
#t3:checked ~ .panel-tab-labels label[for="t3"],
#t4:checked ~ .panel-tab-labels label[for="t4"],
#t5:checked ~ .panel-tab-labels label[for="t5"],
#t6:checked ~ .panel-tab-labels label[for="t6"] { color: var(--gold); border-bottom-color: var(--gold); }
#t1:checked ~ .panel-body[data-panel="1"],
#t2:checked ~ .panel-body[data-panel="2"],
#t3:checked ~ .panel-body[data-panel="3"],
#t4:checked ~ .panel-body[data-panel="4"],
#t5:checked ~ .panel-body[data-panel="5"],
#t6:checked ~ .panel-body[data-panel="6"] { display: block; }

/* ── Card header: icon + title + optional right-aligned action,
   used to replace ad-hoc .section-heading + .card pairs with one
   consistent, denser unit. ──────────────────────────────────── */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: 1rem;
}
.card-head h3 {
  font-family: 'Syne', sans-serif;
  font-size: .92rem;
  font-weight: 700;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.card-head .card-head-meta { font-size: .74rem; color: var(--fg-muted); }

/* ── Collapsible detail block (native <details>, zero JS) ──────── */
.disclosure {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .6rem;
  overflow: hidden;
}
.disclosure summary {
  padding: .65rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
  transition: background var(--t-fast);
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary:hover { background: var(--surface-3); }
.disclosure summary::after { content: '＋'; color: var(--fg-dim); font-weight: 400; }
.disclosure[open] summary::after { content: '－'; }
.disclosure-body { padding: .9rem; border-top: 1px solid var(--border); }

/* ── Responsive data table → stacked cards on small screens.
   Opt-in via .data-table-responsive; requires each <td> to carry a
   data-label attribute matching its column header. Applied to the
   flagship pages rebuilt in v19; existing plain .data-table usages
   elsewhere keep their current (shrink-font) mobile behaviour
   unchanged, so nothing regresses on pages this pass didn't touch. */
@media (max-width: 640px) {
  .data-table-responsive thead { display: none; }
  .data-table-responsive, .data-table-responsive tbody, .data-table-responsive tr, .data-table-responsive td {
    display: block; width: 100%;
  }
  .data-table-responsive tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: .6rem;
    padding: .4rem .8rem;
    background: var(--surface-2);
  }
  .data-table-responsive td {
    border-bottom: 1px dashed var(--border);
    padding: .45rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    text-align: right;
  }
  .data-table-responsive td:last-child { border-bottom: none; }
  .data-table-responsive td::before {
    content: attr(data-label);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--fg-dim);
    text-align: left;
  }
}

/* ── Action bar: unified horizontal strip for primary page actions
   (trade / owner commands), replacing separate scattered buttons. */
.action-bar {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 1.6rem;
}

/* ── Motion utility ──────────────────────────────────────────── */
.fade-up { animation: fadeUp .35s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .ticker-flash-up, .ticker-flash-down, .panel-body { animation: none !important; }
}

@media (max-width: 640px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kpi-strip > div:nth-child(2n) { border-right: none; }
  .kpi-strip > div { border-bottom: 1px solid var(--border); }
  .ticker-price { font-size: 1.7rem; }
  .action-bar { flex-direction: column; }
  .card-head { flex-wrap: wrap; }
}

/* ── reCAPTCHA widget container (v20 — Part 8) ──────────────────
   Google's checkbox widget renders inside an iframe at a fixed
   304×78px, injected asynchronously once its script loads. Reserving
   that footprint up front (min-height, matching flex centering) stops
   the page jumping when the iframe appears — the "no layout shift"
   requirement — and the widget is simply centered rather than scaled
   on narrow screens, since 304px already fits inside every phone
   viewport this app supports with room either side. */
.recaptcha-field {
  display: flex;
  justify-content: center;
  min-height: 78px;
  margin: 0.9rem 0;
}
.recaptcha-field .g-recaptcha {
  transform-origin: center;
}
@media (max-width: 340px) {
  /* Only the very narrowest devices need the widget scaled down —
     anything mainstream (360px+) fits it at full size. */
  .recaptcha-field .g-recaptcha { transform: scale(0.9); }
  .recaptcha-field { min-height: 71px; }
}