/* ══════════════════════════════════════════════════════════════════════
   TUQIO INSIGHTS  ·  Gold Luxury Dark Theme
   ══════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────────────────── */
:root {
  /* Gold palette (from Tuqio logo) */
  --gold:       #E2B84A;
  --gold-hi:    #F5D070;
  --gold-lo:    #B8922E;
  --gold-mlo:   #7A5A18;
  --gold-dim:   rgba(226,184,74,.13);
  --gold-dim2:  rgba(226,184,74,.06);
  --gold-glow:  rgba(226,184,74,.45);
  --gold-glow2: rgba(226,184,74,.18);

  /* Semantic colours */
  --green:      #10B981;
  --green-d:    rgba(16,185,129,.13);
  --amber:      #F59E0B;
  --amber-d:    rgba(245,158,11,.13);
  --red:        #EF4444;
  --red-d:      rgba(239,68,68,.13);
  --blue:       #60A5FA;
  --blue-d:     rgba(96,165,250,.13);

  /* Dark warm backgrounds */
  --bg:         #060503;
  --bg1:        #0C0904;
  --bg2:        #100C06;
  --surface:    #130F08;
  --surface2:   #1A1510;
  --surface3:   #221C12;

  /* Borders */
  --border:     rgba(226,184,74,.09);
  --border-hi:  rgba(226,184,74,.3);
  --border-lo:  rgba(255,255,255,.04);

  /* Text — warm white */
  --text1:      #FDF8EE;
  --text2:      #C8BC9A;
  --text3:      #7A6E56;
  --text4:      #4A3E2C;

  /* Sizes */
  --radius:     16px;
  --radius-sm:  10px;
  --radius-xs:  6px;
  --header-h:   58px;
  --safe-b:     env(safe-area-inset-bottom, 0px);
}

/* ── RESET ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; font-size: 16px; }
body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
#app { height: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input  { font-family: inherit; }
svg, img { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════
   BOOT SPLASH
   ══════════════════════════════════════════════════════════════════════ */
.bs {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
  overflow: hidden;
}
.bs.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* Radial ambient glow behind logo */
.bs-ambient {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(226,184,74,.12) 0%, transparent 70%);
  animation: ambientPulse 4s ease-in-out infinite;
}
@keyframes ambientPulse {
  0%,100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.06); }
}

/* ── Particles ────────────────────────────────────────────────────────── */
.bs-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bp {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  animation: bpFloat linear infinite;
}
.bp1  { width: 3px;  height: 3px;  left: 12%;  animation-duration: 7s;  animation-delay: 0s;    bottom: -10px; }
.bp2  { width: 2px;  height: 2px;  left: 28%;  animation-duration: 9s;  animation-delay: 1.2s;  bottom: -10px; }
.bp3  { width: 4px;  height: 4px;  left: 45%;  animation-duration: 6s;  animation-delay: 0.5s;  bottom: -10px; }
.bp4  { width: 2px;  height: 2px;  left: 60%;  animation-duration: 11s; animation-delay: 2s;    bottom: -10px; }
.bp5  { width: 3px;  height: 3px;  left: 74%;  animation-duration: 8s;  animation-delay: 0.8s;  bottom: -10px; }
.bp6  { width: 2px;  height: 2px;  left: 88%;  animation-duration: 10s; animation-delay: 3s;    bottom: -10px; }
.bp7  { width: 5px;  height: 5px;  left: 5%;   animation-duration: 13s; animation-delay: 1.5s;  bottom: -10px; }
.bp8  { width: 2px;  height: 2px;  left: 35%;  animation-duration: 7.5s;animation-delay: 2.5s;  bottom: -10px; }
.bp9  { width: 3px;  height: 3px;  left: 52%;  animation-duration: 9.5s;animation-delay: 0.3s;  bottom: -10px; }
.bp10 { width: 2px;  height: 2px;  left: 67%;  animation-duration: 8.5s;animation-delay: 4s;    bottom: -10px; }
.bp11 { width: 4px;  height: 4px;  left: 80%;  animation-duration: 6.5s;animation-delay: 1.8s;  bottom: -10px; }
.bp12 { width: 2px;  height: 2px;  left: 92%;  animation-duration: 12s; animation-delay: 0.6s;  bottom: -10px; }
@keyframes bpFloat {
  0%   { opacity: 0;   transform: translateY(0)    scale(0.6); }
  10%  { opacity: .6; }
  80%  { opacity: .3; }
  100% { opacity: 0;   transform: translateY(-100vh) scale(1.2); }
}

/* ── Ring + logo ─────────────────────────────────────────────────────── */
.bs-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}

.bs-ring-frame {
  position: relative; width: 180px; height: 180px;
  animation: ringEntry .8s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes ringEntry {
  from { opacity: 0; transform: scale(.6) rotate(-20deg); }
  to   { opacity: 1; transform: scale(1)  rotate(0deg); }
}

.bs-ring-svg, .bs-ring-deco {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

.bs-ring-track {
  stroke: rgba(226,184,74,.1);
  stroke-width: 3;
}
.bs-ring-progress {
  stroke: url(#ring-grad);
  stroke-width: 3.5;
  stroke-linecap: round;
  /* circumference = 2π×78 ≈ 490 */
  stroke-dasharray: 490;
  stroke-dashoffset: 490;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset .35s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 0 6px rgba(245,208,106,.6));
}

.bs-ring-deco { opacity: .25; animation: ringDecoSpin 20s linear infinite; }
.bs-deco-circle {
  stroke: var(--gold);
  stroke-width: .5;
  stroke-dasharray: 4 8;
}
@keyframes ringDecoSpin { to { transform: rotate(360deg); } }

.bs-logo-mount {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.bs-logo {
  width: 96px; height: 96px; object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(226,184,74,.5));
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { filter: drop-shadow(0 0 16px rgba(226,184,74,.4)); }
  50%      { filter: drop-shadow(0 0 28px rgba(226,184,74,.7)); }
}

/* ── Text ─────────────────────────────────────────────────────────────── */
.bs-headline {
  font-size: 30px; font-weight: 800; letter-spacing: -.5px;
  opacity: 0; animation: fadeUp .5s .5s ease forwards;
}
.bs-headline-grad {
  background: linear-gradient(135deg, var(--gold-lo) 0%, var(--gold-hi) 50%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bs-tagline {
  font-size: 13px; color: var(--text3); letter-spacing: .5px;
  opacity: 0; animation: fadeUp .5s .65s ease forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Progress bar ─────────────────────────────────────────────────────── */
.bs-track-wrap {
  margin-top: 20px; width: 220px;
  opacity: 0; animation: fadeUp .4s .8s ease forwards;
}
.bs-track {
  position: relative; height: 2px;
  background: rgba(226,184,74,.1); border-radius: 99px;
  overflow: visible;
}
.bs-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-mlo), var(--gold), var(--gold-hi));
  transition: width .3s ease;
}
.bs-fill-glow {
  position: absolute; top: -4px; left: 0; width: inherit; height: 10px;
  background: var(--gold);
  border-radius: 99px; filter: blur(6px);
  opacity: .5;
  pointer-events: none;
  transition: width .3s ease;
}
.bs-status {
  font-size: 12px; color: var(--text3); min-height: 16px; margin-top: 6px;
  opacity: 0; animation: fadeUp .4s .9s ease forwards;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.bs-footer {
  position: absolute; bottom: calc(20px + var(--safe-b));
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text3); letter-spacing: .5px;
  opacity: 0; animation: fadeUp .4s 1s ease forwards;
}
.bs-footer-logo { width: 20px; height: 20px; object-fit: contain; opacity: .6; }

/* ══════════════════════════════════════════════════════════════════════
   TOP PROGRESS BAR
   ══════════════════════════════════════════════════════════════════════ */
.top-loader {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 9998;
  background: linear-gradient(90deg, var(--gold-mlo), var(--gold), var(--gold-hi));
  box-shadow: 0 0 8px var(--gold-glow);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform .3s ease, opacity .2s;
}
.top-loader.tl-on  { opacity: 1; transform: scaleX(.7); transition: transform 2s ease, opacity .2s; }
.top-loader.tl-done { opacity: 1; transform: scaleX(1); transition: transform .2s ease; }
.top-loader.tl-hide { opacity: 0; transition: opacity .3s .1s ease; }

/* ══════════════════════════════════════════════════════════════════════
   VIEWS
   ══════════════════════════════════════════════════════════════════════ */
.view {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  animation: viewIn .3s ease;
}
.view.active { display: flex; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════
   LOGIN
   ══════════════════════════════════════════════════════════════════════ */
.login-bg {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.login-orb {
  position: absolute; border-radius: 50%; filter: blur(100px); opacity: .22;
  animation: orbPulse 6s ease-in-out infinite;
}
.lo1 { width: 400px; height: 400px; background: var(--gold);    top: -100px; right: -80px;  animation-delay: 0s; }
.lo2 { width: 300px; height: 300px; background: var(--gold-lo); bottom:-80px; left:-60px;   animation-delay: 2s; }
.lo3 { width: 220px; height: 220px; background: var(--gold-hi); top:40%;  left:30%;         animation-delay: 1s; }
@keyframes orbPulse {
  0%,100% { opacity: .15; transform: scale(1); }
  50%      { opacity: .3;  transform: scale(1.1); }
}

.login-scroll {
  flex: 1; overflow-y: auto; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px calc(32px + var(--safe-b));
}
.login-card {
  width: 100%; max-width: 420px;
  background: linear-gradient(160deg, rgba(26,21,16,.95), rgba(13,9,4,.98));
  border: 1px solid var(--border-hi);
  border-radius: 24px;
  padding: 36px 28px 28px;
  box-shadow:
    0 0 0 1px rgba(226,184,74,.05),
    0 32px 80px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(226,184,74,.12);
  backdrop-filter: blur(24px);
}

.login-brand { text-align: center; margin-bottom: 32px; }
.login-logo-ring {
  width: 80px; height: 80px; border-radius: 24px;
  background: rgba(226,184,74,.06);
  border: 1px solid var(--border-hi);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 0 40px var(--gold-glow2), inset 0 1px 0 rgba(226,184,74,.15);
}
.login-logo { width: 56px; height: 56px; object-fit: contain; }
.login-title {
  font-size: 26px; font-weight: 800; letter-spacing: -.5px;
  background: linear-gradient(135deg, var(--gold-lo), var(--gold-hi));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-sub { font-size: 13px; color: var(--text3); margin-top: 4px; }

/* ── Form fields ─────────────────────────────────────────────────────── */
.field-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field-group label { font-size: 12px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .6px; }
.field-input {
  width: 100%;
  background: rgba(6,5,3,.8);
  border: 1px solid rgba(226,184,74,.12);
  border-radius: var(--radius-sm);
  color: var(--text1);
  padding: 13px 16px;
  font-size: 15px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field-input::placeholder { color: var(--text4); }
.field-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(226,184,74,.1), 0 0 20px rgba(226,184,74,.06);
}

.pw-wrap { position: relative; }
.pw-wrap .field-input { padding-right: 48px; }
.pw-eye {
  position: absolute; right: 0; top: 0; bottom: 0; width: 48px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); transition: color .2s;
}
.pw-eye:hover { color: var(--gold); }

.form-error { font-size: 13px; color: var(--red); min-height: 16px; margin-bottom: 6px; }

.login-card-footer {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 24px;
  font-size: 11px; color: var(--text4); letter-spacing: .5px;
}
.login-footer-logo { width: 18px; height: 18px; object-fit: contain; opacity: .4; }

/* ══════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════ */
.btn-gold {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--gold-lo) 0%, var(--gold) 50%, var(--gold-hi) 100%);
  color: #1A1000;
  font-size: 15px; font-weight: 700; letter-spacing: .2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px var(--gold-glow2), 0 0 0 1px rgba(226,184,74,.3), inset 0 1px 0 rgba(255,255,255,.15);
  transition: opacity .2s, transform .15s, box-shadow .2s;
}
.btn-gold:hover  { opacity: .9; box-shadow: 0 6px 28px var(--gold-glow), 0 0 0 1px rgba(226,184,74,.5); }
.btn-gold:active { transform: scale(.98); opacity: .85; }
.btn-gold.full   { width: 100%; }
.btn-gold:disabled { opacity: .4; pointer-events: none; }

.btn-ghost {
  background: rgba(226,184,74,.06);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: var(--radius-sm);
  padding: 12px 20px; font-size: 14px; font-weight: 500;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-ghost:hover { background: rgba(226,184,74,.1); color: var(--text1); border-color: var(--border-hi); }
.btn-ghost.full  { width: 100%; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: rgba(226,184,74,.08); color: var(--gold); }

/* ══════════════════════════════════════════════════════════════════════
   TOP BAR  (biz select)
   ══════════════════════════════════════════════════════════════════════ */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: var(--header-h);
  background: var(--bg); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.top-bar-left { display: flex; align-items: center; gap: 10px; }
.header-logo-img { width: 28px; height: 28px; object-fit: contain; }
.top-bar-title { font-size: 17px; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   BIZ SELECT
   ══════════════════════════════════════════════════════════════════════ */
.view-body {
  flex: 1; overflow-y: auto;
  padding: 20px 16px calc(24px + var(--safe-b));
}
.welcome-block { margin-bottom: 24px; }
.welcome-name {
  font-size: 22px; font-weight: 800;
  background: linear-gradient(135deg, var(--text1), var(--gold-hi));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.welcome-sub { font-size: 14px; color: var(--text3); margin-top: 5px; }

.biz-list { display: flex; flex-direction: column; gap: 10px; }
.biz-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.biz-card:hover {
  border-color: var(--border-hi);
  background: var(--surface2);
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 20px rgba(226,184,74,.06);
}
.biz-avatar {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: var(--gold-dim);
  border: 1px solid rgba(226,184,74,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; color: var(--gold);
}
.biz-info { flex: 1; min-width: 0; }
.biz-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-role { font-size: 12px; color: var(--text3); margin-top: 3px; text-transform: capitalize; }
.biz-chevron { color: var(--text4); }

/* ══════════════════════════════════════════════════════════════════════
   WORKSPACE HEADER
   ══════════════════════════════════════════════════════════════════════ */
.workspace-view { background: var(--bg); }
.ins-header {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px; height: var(--header-h);
  background: linear-gradient(180deg, rgba(20,16,8,.98) 0%, rgba(6,5,3,.98) 100%);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  box-shadow: 0 1px 20px rgba(0,0,0,.5);
}
.ins-header-center { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ins-header-logo-row { display: flex; align-items: center; gap: 8px; }
.ins-header-logo { width: 24px; height: 24px; object-fit: contain; opacity: .9; }
.ins-header-title {
  font-size: 16px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ins-header-sub {
  font-size: 11px; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.ins-header-actions { display: flex; gap: 2px; }
.back-btn { color: var(--gold); }
.back-btn:hover { background: var(--gold-dim); color: var(--gold-hi); }

/* ══════════════════════════════════════════════════════════════════════
   PANELS
   ══════════════════════════════════════════════════════════════════════ */
.workspace-body { flex: 1; overflow: hidden; position: relative; }
.ins-panel {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 18px 16px calc(28px + var(--safe-b));
  display: none; flex-direction: column; gap: 22px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.ins-panel.active {
  display: flex; opacity: 1; transform: translateY(0);
  animation: panelIn .25s ease;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.ins-section { display: flex; flex-direction: column; gap: 12px; }
.ins-section-header { display: flex; align-items: center; justify-content: space-between; }
.ins-section-label {
  font-size: 11px; font-weight: 700;
  color: var(--text3); text-transform: uppercase; letter-spacing: 1px;
}
.count-badge {
  font-size: 11px; color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(226,184,74,.2);
  border-radius: 99px; padding: 2px 8px; font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   KPI CARDS
   ══════════════════════════════════════════════════════════════════════ */
.kpi-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;
}
.kpi-card {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-lo);
  border-radius: var(--radius);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 5px;
  transition: transform .2s, box-shadow .2s;
  animation: kpiIn .35s ease backwards;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
@keyframes kpiIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gold-dim);
  transition: background .2s;
}

/* Colour variants */
.kpi-gold  { border-color: rgba(226,184,74,.15); background: linear-gradient(135deg, rgba(226,184,74,.08), rgba(226,184,74,.03)); }
.kpi-gold::before  { background: linear-gradient(90deg, var(--gold-mlo), var(--gold)); }
.kpi-green { border-color: rgba(16,185,129,.15); background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(16,185,129,.02)); }
.kpi-green::before { background: linear-gradient(90deg, #059669, var(--green)); }
.kpi-amber { border-color: rgba(245,158,11,.15); background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.02)); }
.kpi-amber::before { background: linear-gradient(90deg, #d97706, var(--amber)); }
.kpi-red   { border-color: rgba(239,68,68,.15);  background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(239,68,68,.02)); }
.kpi-red::before   { background: linear-gradient(90deg, #b91c1c, var(--red)); }
.kpi-default::before { background: linear-gradient(90deg, var(--surface3), var(--surface2)); }

.kpi-label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .8px; }
.kpi-value { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.5px; }
.kpi-sub   { font-size: 11px; color: var(--text2); }
.kpi-gold  .kpi-value { color: var(--gold); }
.kpi-green .kpi-value { color: var(--green); }
.kpi-amber .kpi-value { color: var(--amber); }
.kpi-red   .kpi-value { color: var(--red); }
.kpi-default .kpi-value { color: var(--text1); }

/* ══════════════════════════════════════════════════════════════════════
   EVENT CARDS
   ══════════════════════════════════════════════════════════════════════ */
.events-grid { display: flex; flex-direction: column; gap: 10px; }
.event-card {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-lo);
  border-radius: var(--radius);
  padding: 16px 16px 14px 20px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
  animation: kpiIn .35s ease backwards;
}
.event-card::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold-mlo), var(--gold));
  opacity: .5; transition: opacity .2s;
}
.event-card:hover {
  border-color: rgba(226,184,74,.18);
  background: var(--surface2);
  transform: translateX(2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 20px rgba(226,184,74,.04);
}
.event-card:hover::before { opacity: 1; }

.event-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.event-card-name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.event-card-date { font-size: 12px; color: var(--text3); margin-top: 3px; }

.event-status-chip {
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 99px; flex-shrink: 0; white-space: nowrap;
}
.chip-active   { background: rgba(16,185,129,.15); color: var(--green); border: 1px solid rgba(16,185,129,.25); }
.chip-inactive { background: rgba(255,255,255,.04); color: var(--text3); border: 1px solid rgba(255,255,255,.06); }

.event-card-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.stat-chip {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text3);
  background: rgba(226,184,74,.05);
  border: 1px solid rgba(226,184,74,.1);
  border-radius: 99px; padding: 4px 10px;
}
.stat-chip-val { font-weight: 700; color: var(--gold); }

/* ══════════════════════════════════════════════════════════════════════
   RECENT CHECK-INS
   ══════════════════════════════════════════════════════════════════════ */
.scans-list { display: flex; flex-direction: column; gap: 8px; }
.scan-item {
  background: var(--surface);
  border: 1px solid var(--border-lo);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  animation: kpiIn .3s ease backwards;
}
.scan-avatar {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: var(--gold-dim);
  border: 1px solid rgba(226,184,74,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--gold);
}
.scan-info { flex: 1; min-width: 0; }
.scan-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-meta { font-size: 11px; color: var(--text3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-time { font-size: 11px; color: var(--text3); flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════
   EVENT HERO
   ══════════════════════════════════════════════════════════════════════ */
.event-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1A1206 0%, #2A1E08 40%, #1F1508 100%);
  border: 1px solid rgba(226,184,74,.2);
  border-radius: var(--radius);
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 7px;
  box-shadow: 0 0 60px rgba(226,184,74,.06), inset 0 1px 0 rgba(226,184,74,.12);
}
.event-hero-glare {
  position: absolute; top: -60px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(226,184,74,.18) 0%, transparent 70%);
  pointer-events: none;
}
.event-hero-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.hero-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px;
  background: rgba(226,184,74,.12);
  border: 1px solid rgba(226,184,74,.25);
  color: var(--gold-hi);
}
.event-hero-name { font-size: 21px; font-weight: 800; line-height: 1.2; }
.event-hero-meta { font-size: 13px; color: var(--text3); }

/* ══════════════════════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════════════════════ */
.etabs {
  display: flex; gap: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.etab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 13px; font-weight: 500; color: var(--text3);
  padding: 10px 6px; border-radius: var(--radius-xs);
  transition: background .2s, color .2s;
}
.etab:hover { color: var(--text2); background: rgba(226,184,74,.04); }
.etab.active {
  background: linear-gradient(135deg, rgba(226,184,74,.12), rgba(226,184,74,.06));
  color: var(--gold);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(226,184,74,.15);
}
.etab-pane { display: none; flex-direction: column; gap: 14px; }
.etab-pane.active { display: flex; }

/* ══════════════════════════════════════════════════════════════════════
   STAT CARDS
   ══════════════════════════════════════════════════════════════════════ */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border-lo);
  border-radius: var(--radius);
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.stat-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stat-card-title { font-size: 14px; font-weight: 700; }
.stat-card-caption { font-size: 12px; color: var(--text3); margin-top: 4px; }
.stat-pct { font-size: 26px; font-weight: 800; line-height: 1; }
.stat-pct.gold  { color: var(--gold); }
.stat-pct.green { color: var(--green); }
.stat-pct.amber { color: var(--amber); }
.stat-pct.red   { color: var(--red); }

.prog-track {
  width: 100%; height: 6px; border-radius: 99px;
  background: rgba(255,255,255,.04); overflow: hidden;
}
.prog-fill {
  height: 100%; border-radius: 99px;
  transition: width .8s cubic-bezier(.34,1.2,.64,1);
}
.prog-gold  { background: linear-gradient(90deg, var(--gold-mlo), var(--gold), var(--gold-hi)); box-shadow: 0 0 8px var(--gold-glow2); }
.prog-green { background: linear-gradient(90deg, #059669, var(--green)); }
.prog-amber { background: linear-gradient(90deg, #d97706, var(--amber)); }
.prog-red   { background: linear-gradient(90deg, #b91c1c, var(--red)); }

/* ══════════════════════════════════════════════════════════════════════
   LOADING OVERLAY
   ══════════════════════════════════════════════════════════════════════ */
.loading-overlay {
  position: fixed; inset: 0; z-index: 8000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .25s;
}
.loading-overlay.hidden { display: none; }
.lo-backdrop {
  position: absolute; inset: 0;
  background: rgba(6,5,3,.85);
  backdrop-filter: blur(8px);
}
.lo-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.lo-ring-wrap {
  position: relative; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.lo-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lo-ring-track {
  stroke: rgba(226,184,74,.1);
  stroke-width: 2.5;
}
.lo-ring-spin {
  stroke: url(#lo-grad);
  stroke-width: 2.5;
  stroke-linecap: round;
  /* circumference = 2π×30 ≈ 188 */
  stroke-dasharray: 60 128;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: loSpin 1.1s linear infinite;
  filter: drop-shadow(0 0 4px rgba(226,184,74,.5));
}
@keyframes loSpin { to { stroke-dashoffset: -188; } }
.lo-logo {
  width: 38px; height: 38px; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(226,184,74,.4));
  animation: logoPulse 2s ease-in-out infinite;
}
.lo-label { font-size: 12px; color: var(--text3); letter-spacing: .5px; }

/* ══════════════════════════════════════════════════════════════════════
   TOAST STACK
   ══════════════════════════════════════════════════════════════════════ */
#toast-stack {
  position: fixed; bottom: calc(16px + var(--safe-b)); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9000; pointer-events: none;
  max-width: 380px; width: calc(100vw - 32px);
}
.toast {
  background: rgba(26,21,16,.96);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-size: 14px; font-weight: 500; color: var(--text1);
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(226,184,74,.04);
  backdrop-filter: blur(16px);
  animation: toastIn .25s ease;
  transition: opacity .3s, transform .3s;
}
.toast.toast-success { border-color: rgba(16,185,129,.3);  color: var(--green); }
.toast.toast-error   { border-color: rgba(239,68,68,.3);   color: var(--red);   }
.toast.toast-info    { border-color: rgba(226,184,74,.25); color: var(--gold);  }
.toast.out { opacity: 0; transform: translateY(8px) scale(.97); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ══════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 36px 16px; text-align: center;
}
.empty-state-icon { font-size: 40px; opacity: .35; }
.empty-state-text { font-size: 15px; font-weight: 600; color: var(--text2); }
.empty-state-sub  { font-size: 13px; color: var(--text3); }

/* ══════════════════════════════════════════════════════════════════════
   SHIMMER SKELETONS
   ══════════════════════════════════════════════════════════════════════ */
.shimmer {
  background: linear-gradient(90deg,
    var(--surface) 0%,
    var(--surface2) 40%,
    rgba(226,184,74,.05) 50%,
    var(--surface2) 60%,
    var(--surface) 100%
  );
  background-size: 300% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { to { background-position: -300% 0; } }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  .kpi-grid   { grid-template-columns: repeat(2,1fr); }
  .login-card { padding: 40px 32px 32px; }
}
@media (min-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(3,1fr); }
}
@media (min-width: 800px) {
  .kpi-grid { grid-template-columns: repeat(4,1fr); }
  .ins-panel { padding-left: 24px; padding-right: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════
   TAPPABLE KPI CARDS
   ══════════════════════════════════════════════════════════════════════ */
.kpi-tappable {
  cursor: pointer;
  padding-bottom: 12px;
}
.kpi-tappable:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 0 24px rgba(226,184,74,.08);
  border-color: var(--border-hi) !important;
}
.kpi-tappable:active { transform: scale(.97); }
.kpi-tap-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
}
.kpi-tap-label {
  font-size: 10px; font-weight: 600; letter-spacing: .4px;
  color: var(--gold); opacity: .65;
  transition: opacity .15s;
}
.kpi-tappable:hover .kpi-tap-label { opacity: 1; }
.kpi-tap-arrow {
  color: var(--gold); opacity: .5;
  transition: opacity .15s, transform .15s;
}
.kpi-tappable:hover .kpi-tap-arrow { opacity: 1; transform: translateX(2px); }

/* ══════════════════════════════════════════════════════════════════════
   LIST PANEL  (panel-list)
   ══════════════════════════════════════════════════════════════════════ */
.lp-panel {
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

/* ── Sticky search bar ──────────────────────────────────────────────── */
.lp-search-wrap {
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.lp-search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  transition: border-color .2s, box-shadow .2s;
}
.lp-search-box:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(226,184,74,.1);
}
.lp-search-icon-slot {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--text3);
}
.lp-icon-spin {
  animation: lp-spin .8s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }
.lp-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text1);
  font-size: 15px;
  padding: 12px 0;
  min-width: 0;
}
.lp-search-input::placeholder { color: var(--text4); }
.lp-clear-btn {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--text3);
  transition: background .15s, color .15s;
}
.lp-clear-btn:hover { background: rgba(226,184,74,.1); color: var(--gold); }
.hidden { display: none !important; }

/* ── Scrollable content area ────────────────────────────────────────── */
.lp-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 14px 16px calc(28px + var(--safe-b));
  gap: 0;
}

/* ── Meta row ───────────────────────────────────────────────────────── */
.lp-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.lp-meta-count {
  font-size: 12px; font-weight: 600; color: var(--text3);
}
.lp-mode-chips { display: flex; gap: 6px; }
.lp-chip {
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  padding: 4px 10px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text3);
  background: var(--surface);
  transition: background .15s, color .15s, border-color .15s;
}
.lp-chip.active {
  background: var(--gold-dim);
  border-color: rgba(226,184,74,.3);
  color: var(--gold);
}

/* ── Items list ─────────────────────────────────────────────────────── */
.lp-items { display: flex; flex-direction: column; gap: 8px; }

/* ── Person card (attendant / checked-in) ───────────────────────────── */
.person-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border-lo);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  animation: kpiIn .25s ease backwards;
  transition: border-color .15s, background .15s;
}
.person-card:hover {
  border-color: var(--border);
  background: var(--surface2);
}
.person-avatar {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--gold-dim);
  border: 1px solid rgba(226,184,74,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--gold);
  letter-spacing: -.5px;
}
.person-avatar.green-av { background: var(--green-d); border-color: rgba(16,185,129,.2); color: var(--green); }
.person-info { flex: 1; min-width: 0; }
.person-name {
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.person-meta {
  font-size: 12px; color: var(--text3); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.person-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.person-amount {
  font-size: 14px; font-weight: 700; color: var(--gold);
  white-space: nowrap;
}

/* ── Status badges ──────────────────────────────────────────────────── */
.person-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px; white-space: nowrap;
}
.badge-green  { background: var(--green-d);  border: 1px solid rgba(16,185,129,.25); color: var(--green); }
.badge-amber  { background: var(--amber-d);  border: 1px solid rgba(245,158,11,.25); color: var(--amber); }
.badge-dim    { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); color: var(--text3); }

/* ── Pledge card ────────────────────────────────────────────────────── */
.pledge-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border-lo);
  border-left: 2px solid var(--gold-mlo);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  animation: kpiIn .25s ease backwards;
  transition: border-color .15s, background .15s;
}
.pledge-card.paid   { border-left-color: var(--green); }
.pledge-card.unpaid { border-left-color: var(--amber); }
.pledge-card:hover  { background: var(--surface2); }
.pledge-info { flex: 1; min-width: 0; }
.pledge-name {
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pledge-date { font-size: 12px; color: var(--text3); margin-top: 3px; }
.pledge-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.pledge-amount { font-size: 15px; font-weight: 800; color: var(--gold); white-space: nowrap; }

/* ── Load more ──────────────────────────────────────────────────────── */
.lp-load-more {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px;
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text2); font-size: 13px; font-weight: 600;
  transition: background .2s, color .2s, border-color .2s;
}
.lp-load-more:hover {
  background: var(--gold-dim); border-color: var(--border-hi); color: var(--gold);
}
.lp-load-more svg { color: var(--gold); }