:root {
  --ink: #07111f;
  --ink-2: #0c1b2e;
  --paper: #f4efe4;
  --gold: #e2b657;
  --gold-2: #f0d48a;
  --teal: #2ec9b3;
  --rose: #ff6b8a;
  --blue: #6ea8ff;
  --line: rgba(244, 239, 228, .12);
  --glass: rgba(12, 27, 46, .72);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.app-body {
  font-family: "Manrope", sans-serif;
  background:
    radial-gradient(1200px 700px at 8% -10%, rgba(226, 182, 87, .22), transparent 55%),
    radial-gradient(900px 600px at 110% 8%, rgba(46, 201, 179, .16), transparent 50%),
    linear-gradient(180deg, #06101c 0%, #0a1829 48%, #07111f 100%);
  color: var(--paper);
  overflow-x: hidden;
}

.orb, .orb-2 {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  filter: blur(40px);
  animation: drift 18s ease-in-out infinite;
}
.orb {
  width: 340px; height: 340px; left: -80px; top: 80px;
  background: radial-gradient(circle, rgba(226,182,87,.35), transparent 70%);
}
.orb-2 {
  width: 420px; height: 420px; right: -120px; bottom: 40px;
  background: radial-gradient(circle, rgba(46,201,179,.28), transparent 70%);
  animation-delay: -7s;
}
@keyframes drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(40px,-30px) scale(1.12); }
}

.wrap { position: relative; z-index: 1; width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0 10px;
}
.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.mark {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), #b8892c);
  color: #1a1204; font-weight: 800; letter-spacing: -.04em;
  box-shadow: 0 10px 30px rgba(226,182,87,.35);
  animation: pulse 3.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.brand b { display: block; font-size: 15px; }
.brand small { color: rgba(244,239,228,.62); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.nav-links { display: flex; gap: 10px; align-items: center; }
.btn, .ghost, .btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 11px 18px; cursor: pointer;
  text-decoration: none; font-weight: 700; font-size: 14px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn {
  background: linear-gradient(135deg, var(--gold), #c9962d);
  color: #1a1204;
  box-shadow: 0 10px 24px rgba(226,182,87,.28);
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.ghost {
  background: transparent; color: var(--paper);
  border: 1px solid var(--line);
}
.hero { padding: 42px 0 18px; }
.eyebrow {
  display: inline-flex; gap: 8px; align-items: center;
  color: var(--gold-2); letter-spacing: .18em; text-transform: uppercase; font-size: 11px; font-weight: 800;
}
.live { width: 8px; height: 8px; border-radius: 50%; background: #39d98a; box-shadow: 0 0 0 0 rgba(57,217,138,.7); animation: ping 1.6s infinite; }
@keyframes ping {
  70% { box-shadow: 0 0 0 10px rgba(57,217,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(57,217,138,0); }
}
.hero h1 {
  font-family: "Fraunces", serif;
  font-size: clamp(36px, 6vw, 68px);
  line-height: .95; margin: 12px 0 10px; max-width: 14ch;
  animation: rise .8s ease both;
}
.hero p { max-width: 46ch; color: rgba(244,239,228,.72); font-size: 17px; animation: rise .9s ease .08s both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 28px 0 22px; }
.kpi {
  background: var(--glass); border: 1px solid var(--line); border-radius: 22px;
  padding: 18px; backdrop-filter: blur(16px);
  animation: rise .7s ease both;
}
.kpi:nth-child(2) { animation-delay: .08s; }
.kpi:nth-child(3) { animation-delay: .16s; }
.kpi:nth-child(4) { animation-delay: .24s; }
.kpi span { color: rgba(244,239,228,.6); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.kpi strong { display: block; font-family: "Fraunces", serif; font-size: 34px; margin: 8px 0 6px; }
.kpi em { font-style: normal; color: var(--teal); font-size: 13px; font-weight: 700; }
.ring {
  height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 12px;
}
.ring b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--teal)); animation: fill 1.4s ease forwards; }
@keyframes fill { to { width: var(--p); } }

.grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 14px; margin-bottom: 14px; }
.card {
  background: var(--glass); border: 1px solid var(--line); border-radius: 24px;
  padding: 18px; backdrop-filter: blur(16px);
  animation: rise .8s ease both;
}
.card h2 { margin: 0 0 4px; font-size: 18px; }
.card p { margin: 0 0 14px; color: rgba(244,239,228,.6); font-size: 13px; }
.chart-box { position: relative; height: 280px; }
.footer { padding: 40px 0 28px; color: rgba(244,239,228,.5); font-size: 13px; display: flex; justify-content: space-between; }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card {
  width: min(440px, 100%); background: var(--glass); border: 1px solid var(--line);
  border-radius: 28px; padding: 32px; text-align: center; backdrop-filter: blur(18px);
  animation: rise .6s ease both;
}
.auth-card h1 { font-family: "Fraunces", serif; margin: 12px 0 8px; }
.auth-card p { color: rgba(244,239,228,.68); }
.btn-google {
  width: 100%; margin-top: 18px; background: #fff; color: #1f1f1f;
}
.btn-google svg { width: 18px; height: 18px; }
.err { color: #ff8fa3; font-size: 14px; margin-top: 12px; }

.app-frame { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.side {
  padding: 22px 16px; border-right: 1px solid var(--line);
  background: rgba(7,17,31,.55); backdrop-filter: blur(18px);
}
.side a {
  display: flex; gap: 10px; align-items: center; color: rgba(244,239,228,.78);
  text-decoration: none; padding: 10px 12px; border-radius: 12px; margin-top: 4px;
}
.side a.active, .side a:hover { background: rgba(226,182,87,.12); color: var(--gold-2); }
.main { padding: 22px 24px 40px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; }
.userchip { display: flex; align-items: center; gap: 10px; }
.userchip img, .avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  background: #1d334d; display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.flash { background: rgba(46,201,179,.14); border: 1px solid rgba(46,201,179,.3); color: #bff7ee; padding: 10px 14px; border-radius: 12px; margin-bottom: 14px; }
.table-wrap { overflow: auto; border-radius: 18px; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: rgba(244,239,228,.55); font-weight: 700; }
input.cell, select, input[type=email] {
  background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--paper);
  border-radius: 10px; padding: 8px 10px; font: inherit;
}
.row-actions { display: flex; gap: 8px; }
.danger { background: transparent; color: #ff8fa3; border: 1px solid rgba(255,111,138,.3); }

@media (max-width: 980px) {
  .kpis, .grid, .app-frame { grid-template-columns: 1fr; }
  .side { display: flex; gap: 8px; overflow: auto; }
}