:root {
  --ink: #17110a;
  --ink-soft: #47351d;
  --deep: #11100e;
  --deep-2: #1d1710;
  --gold: #c79a43;
  --gold-2: #e8c879;
  --champagne: #f6ead2;
  --ivory: #fffaf0;
  --paper: #fffdf8;
  --line: rgba(199,154,67,.22);
  --muted: #786b5b;
  --success: #0f766e;
  --danger: #b42318;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at top left, #fff4dc 0, #fbf1dd 28%, #f7f1e9 48%, #f5f2ed 100%);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(232,200,121,.26), transparent 34%),
    linear-gradient(132deg, #130f0b 0%, #21170d 55%, #3a250b 100%);
  color: #fff9ea;
  padding: 30px 30px 32px;
  border-bottom: 1px solid rgba(232,200,121,.34);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.08) 46%, transparent 58%);
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(232,200,121,.18);
  filter: blur(36px);
  right: -90px;
  top: -150px;
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand-mark { display: flex; align-items: center; gap: 18px; }
.brand-emblem {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: #1d1307;
  font-weight: 900;
  letter-spacing: .08em;
  background: linear-gradient(145deg, #fff1bb, #c6902c 55%, #ffdb7b);
  box-shadow: 0 18px 45px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.72);
}
.eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--gold-2);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
}
.eyebrow.dark { color: #9c7125; }
h1 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 42px); line-height: 1.05; }
h2 { margin: 0 0 12px; font-size: 20px; }
h3 { margin: 0; font-size: 16px; }
p { margin: 0; }
main { padding: 24px 28px 54px; max-width: 1440px; margin: 0 auto; }
.luxury-card {
  background: rgba(255,250,240,.1);
  border: 1px solid rgba(232,200,121,.34);
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}
.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.metric {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fffdf8, #fff7e7);
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(85,56,14,.08);
}
.metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #8c641f, #edcd79, #b58226);
}
.metric .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.metric .value { font-size: 32px; margin-top: 10px; font-weight: 850; color: #2b1c0b; }
.metric .sub { margin-top: 4px; color: #8a7a62; font-size: 12px; }
.panel {
  background: rgba(255,253,248,.92);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  margin-bottom: 22px;
  box-shadow: 0 18px 42px rgba(65,43,11,.08);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dashboard-panel { background: linear-gradient(180deg, rgba(255,253,248,.96), rgba(255,248,234,.94)); }
.insight-grid { display: grid; grid-template-columns: 1.05fr 1fr 1fr 1fr; gap: 16px; }
.subgrid { display: grid; grid-template-columns: 1.6fr .9fr; gap: 16px; margin-top: 16px; }
.chart-card {
  background: linear-gradient(180deg, #fffdf8 0%, #fff8ea 100%);
  border: 1px solid rgba(199,154,67,.26);
  border-radius: 18px;
  padding: 16px;
  min-height: 220px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.chart-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.mini-label { color: #9a7c48; font-size: 12px; }
.segment-chart { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center; }
.donut {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(#c79a43 0deg, #c79a43 var(--a), #2e2416 var(--a), #2e2416 var(--b), #7a5c25 var(--b), #7a5c25 var(--c), #eee3ce var(--c));
  box-shadow: 0 18px 34px rgba(97,65,17,.16);
}
.donut::after {
  content: attr(data-total);
  position: absolute;
  inset: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fffdf8;
  color: #261a0d;
  font-size: 28px;
  font-weight: 850;
  border: 1px solid rgba(199,154,67,.28);
}
.legend { display: grid; gap: 10px; }
.legend-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; color: #4c3821; font-size: 13px; }
.dot { width: 10px; height: 10px; border-radius: 999px; background: var(--dot); }
.bars { display: grid; gap: 12px; }
.bar-row { display: grid; gap: 6px; }
.bar-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #4c3821; }
.bar-track { height: 10px; border-radius: 999px; background: #efe5d2; overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; width: var(--w); background: linear-gradient(90deg, #7d551b, #d3a54b, #f1d286); }
.performance-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.perf-card { border: 1px solid rgba(199,154,67,.24); border-radius: 14px; padding: 14px; background: rgba(255,255,255,.58); }
.perf-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.perf-title strong { font-size: 15px; }
.perf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.perf-metric { background: #fff8e8; border-radius: 12px; padding: 10px; }
.perf-metric span { display: block; color: #927a4f; font-size: 11px; }
.perf-metric b { display: block; margin-top: 5px; font-size: 18px; color: #2a1b0c; }
.insight-list { display: grid; gap: 12px; }
.insight-item { border-left: 3px solid var(--gold); padding: 10px 12px; background: #fff8e8; border-radius: 0 12px 12px 0; color: #4a351c; font-size: 13px; line-height: 1.55; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(199,154,67,.16); }
table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fffdf8; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid rgba(199,154,67,.15); vertical-align: top; }
th { color: #6c572d; background: #fff6df; font-weight: 800; white-space: nowrap; }
code, pre { background: #fff7e4; border: 1px solid rgba(199,154,67,.24); border-radius: 10px; padding: 4px 7px; color: #50370f; }
pre { overflow: auto; padding: 12px; min-height: 80px; }
.badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: #fff1cc; color: #5f3e0e; font-size: 12px; font-weight: 800; }
.badge.web { background: #e9f3ff; color: #17446d; }
.badge.scheme { background: #fff1cc; color: #6f4810; }
.badge.disabled { background: #ffe8e5; color: #9f241a; }
.badge.ok { background: #e3faf5; color: #0f766e; }
.form-stack { display: grid; gap: 8px; }
label { display: block; margin-top: 8px; color: #6c572d; font-size: 13px; font-weight: 700; }
input, select, textarea {
  width: 100%;
  border: 1px solid rgba(199,154,67,.32);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  background: #fffdf8;
  color: #2e1d0c;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(199,154,67,.14); }
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: linear-gradient(135deg, #2b1b0b, #5c3d13 55%, #be8a2b);
  color: #fff8e8;
  border-radius: 12px;
  padding: 11px 15px;
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 12px 22px rgba(85,56,14,.18);
}
button:hover, .button:hover { filter: brightness(1.04); transform: translateY(-1px); }
.button.ghost { background: #fff8e8; color: #6d4912; border: 1px solid rgba(199,154,67,.32); box-shadow: none; margin-right: 8px; }
.token-box { min-width: 330px; padding: 14px; border-radius: 18px; }
.token-box label { color: #f6e6c1; margin: 0 0 8px; }
.token-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.token-box input { background: rgba(255,255,255,.12); border-color: rgba(232,200,121,.38); color: #fff8e8; }
.token-box input::placeholder { color: rgba(255,248,232,.6); }
.muted { color: var(--muted); font-size: 13px; line-height: 1.65; }
.empty { color: #9a7c48; font-size: 13px; padding: 18px; text-align: center; border: 1px dashed rgba(199,154,67,.35); border-radius: 14px; background: #fff8e8; }
.claim-item { padding: 14px 0; border-bottom: 1px solid rgba(199,154,67,.16); }
.claim-item:last-child { border-bottom: 0; }
@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insight-grid { grid-template-columns: 1fr 1fr; }
  .subgrid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-content, .two-col { display: block; }
  .token-box { margin-top: 18px; min-width: 0; }
  .segment-chart { grid-template-columns: 1fr; }
  .performance-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  main { padding: 18px 14px 40px; }
  .hero { padding: 24px 16px; }
  .brand-mark { align-items: flex-start; }
  .brand-emblem { width: 58px; height: 58px; border-radius: 18px; font-size: 13px; }
  .grid, .insight-grid { grid-template-columns: 1fr; }
  .panel-head { display: block; }
  .panel-head button { margin-top: 12px; }
}

/* V5 enhancements */
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.status-item{padding:14px;border:1px solid rgba(201,162,74,.22);border-radius:16px;background:#fffaf0}.status-item span{display:block;color:#80622a;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.status-item strong{display:block;margin-top:6px;color:#221506;word-break:break-all}.status-item.warn{background:#fff7e2;border-color:#d28d30}.status-item.ok{background:#f7f2e8}.latest-card{padding:18px;border-radius:18px;background:linear-gradient(135deg,#15100a,#4a320f);color:#fff6db;box-shadow:0 14px 40px rgba(0,0,0,.16)}.latest-card.empty{background:#fffaf0;color:#7b6a47;box-shadow:none}.latest-title{font-size:18px;font-weight:900;margin-bottom:12px}.latest-grid{display:grid;grid-template-columns:120px 1fr;gap:8px}.latest-grid span{color:#e0c781}.latest-grid strong{color:#fff}.funnel .bar-fill,.bar-chart .bar-fill{width:var(--w);height:100%;border-radius:inherit;background:linear-gradient(90deg,#e9cb77,#b7822d)}.bar-row{margin:13px 0}.bar-meta{display:flex;justify-content:space-between;gap:12px;color:#2b2112}.bar-track{height:10px;border-radius:999px;background:#eee1c6;overflow:hidden;margin-top:8px}.insight-list{display:grid;gap:10px}.insight-item{padding:12px 14px;border-radius:14px;background:#fff7e6;border:1px solid rgba(201,162,74,.25);color:#5b4319;line-height:1.6}.timeline{display:grid;gap:10px}.timeline-item{display:flex;gap:16px;align-items:center;padding:13px 15px;border-radius:14px;background:#fffaf0;border:1px solid rgba(201,162,74,.22)}.timeline-item span{font-family:ui-monospace,monospace;color:#9c7932}.timeline-item.claim{background:#f9ecd0}.claim-card{padding:12px 14px;margin:10px 0;border-radius:14px;background:#fffaf0;border:1px solid rgba(201,162,74,.22)}button.mini{font-size:12px;padding:6px 9px;margin-top:8px;border:1px solid #d7bc75;background:#fff8e8;border-radius:999px;color:#49320e;cursor:pointer}.badge.ok{background:#e8d19a;color:#221506}.status-panel code,.hero code{background:rgba(255,255,255,.12);border:1px solid rgba(201,162,74,.35);border-radius:8px;padding:2px 5px}.status-panel code{background:#fff4d8}.form-grid input,.form-grid textarea,.form-grid select{min-width:0}.empty{padding:18px;border-radius:14px;background:#fff8e8;color:#7a6740}.hero-actions{display:flex;flex-wrap:wrap;gap:10px}.panel-actions{display:flex;gap:10px;flex-wrap:wrap}