/* ============================================================
   BUZZ design tokens & components — from Buzz_Brandbook_FINAL
   Honey Gold #F5B731 · Deep Gold #D4942A · Hive Ink #15110A · Comb #FFF6E2
   Headings: Trebuchet MS Bold · Body: Calibri/Segoe (system)
   ============================================================ */

:root {
  --gold: #F5B731;
  --gold-deep: #D4942A;
  --ink: #15110A;
  --comb: #FFF6E2;
  --ok: #7CAF6B;
  --err: #E0584D;
  --font-head: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  --font-body: Calibri, "Segoe UI", -apple-system, system-ui, sans-serif;
}

/* ---------- themes ---------- */
.bz {
  font-family: var(--font-body);
  --bg: #15110A;
  --bg-2: #1A150B;
  --surface: #221B0E;
  --surface-2: #2C2312;
  --border: rgba(245, 183, 49, 0.14);
  --border-strong: rgba(245, 183, 49, 0.30);
  --text: #FFF6E2;
  --muted: #B9A47A;
  --dim: #857450;
  --gold-soft: rgba(245, 183, 49, 0.12);
  color: var(--text);
  background: var(--bg);
}
.bz.bz-light {
  --bg: #FFF6E2;
  --bg-2: #FBEDCB;
  --surface: #FFFFFF;
  --surface-2: #FBF1D9;
  --border: rgba(21, 17, 10, 0.10);
  --border-strong: rgba(21, 17, 10, 0.22);
  --text: #15110A;
  --muted: #7A6A45;
  --dim: #A4936B;
  --gold-soft: rgba(245, 183, 49, 0.20);
}

.bz * { box-sizing: border-box; }
.bz h1, .bz h2, .bz h3 { font-family: var(--font-head); margin: 0; letter-spacing: -0.01em; }
.bz .num { font-variant-numeric: tabular-nums; }

/* honeycomb texture (toggleable) */
.bz .combs {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='73' viewBox='0 0 28 49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5-13-7.5v-15l13-7.5z' fill='none' stroke='%23F5B731' stroke-opacity='0.10'/%3E%3C/svg%3E");
}
.bz.no-combs .combs { background-image: none !important; }

/* ============================================================
   MINI-APP (phone, 390w)
   ============================================================ */
.ph {
  width: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.4;
  overflow: hidden;
}
.ph-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 18px;
}

/* appbar */
.bz-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
}
.bz-brand { display: flex; align-items: center; gap: 10px; }
.bz-brand img { width: 36px; height: 36px; border-radius: 10px; display: block; }
.bz-brand .nm {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}
.bz-brand .nm b { color: var(--gold); font-weight: 700; }
.bz-brand .tg {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 3px;
}
.bz-appbar .acts { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; }
.bz-ava {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--gold);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-head); font-size: 15px;
  border: none; cursor: pointer;
}

/* bottom nav */
.bz-nav {
  display: grid;
  grid-template-columns: 1fr 1fr 64px 1fr 1fr;
  align-items: end;
  gap: 2px;
  padding: 8px 10px 12px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.bz-nav .ni {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  color: var(--dim);
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  padding: 6px 0 0;
  font-family: var(--font-body);
}
.bz-nav .ni svg { width: 21px; height: 21px; }
.bz-nav .ni.on { color: var(--gold); }
.bz-nav .fab-w { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: -22px; }
.bz-nav .fab {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  border: 3px solid var(--bg-2);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px -6px rgba(245, 183, 49, 0.55);
}
.bz-nav .fab svg { width: 24px; height: 24px; }
.bz-nav .fab-w .lab { font-size: 10px; font-weight: 700; color: var(--gold); letter-spacing: 0.04em; }

/* cards */
.bz-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
}
.bz-hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(245, 183, 49, 0.16), transparent 55%),
    var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 16px;
  overflow: hidden;
}

/* section head */
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 0;
}
.sec-head .t {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head);
  font-weight: 700; font-size: 13px; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.sec-head .t::before {
  content: "";
  width: 10px; height: 11px;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.sec-head .c { font-size: 12px; color: var(--dim); font-weight: 600; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 14px;
  font-family: var(--font-head);
  font-weight: 700; font-size: 14px;
  padding: 13px 18px;
  border: none; cursor: pointer;
  letter-spacing: 0.02em;
}
.btn svg { width: 17px; height: 17px; }
.btn-gold {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 115%);
  color: var(--ink);
  box-shadow: 0 10px 24px -8px rgba(245, 183, 49, 0.5);
}
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--text);
}
.btn-soft { background: var(--gold-soft); color: var(--gold); }
.bz-light .btn-soft { color: #8a6210; }
.btn-sm { padding: 8px 13px; font-size: 12.5px; border-radius: 11px; }
.btn-block { width: 100%; }

/* pills & badges */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
}
.pill svg { width: 14px; height: 14px; color: var(--gold); }
.pill.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.pill.on svg { color: var(--ink); }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 7px;
  text-transform: uppercase;
}
.badge.ok { background: rgba(124, 175, 107, 0.16); color: var(--ok); }
.badge.bad { background: rgba(224, 88, 77, 0.14); color: var(--err); }
.badge.pending { background: var(--gold-soft); color: var(--gold); }
.bz-light .badge.pending { color: #8a6210; }
.badge.hot { background: var(--gold); color: var(--ink); }
.badge.hold { background: rgba(185, 164, 122, 0.16); color: var(--muted); }

/* honey progress bar */
.honeybar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: visible;
}
.honeybar .fill {
  position: absolute; inset: 1px auto 1px 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}
.honeybar .drop {
  position: absolute; top: 50%;
  width: 16px; height: 16px;
  transform: translate(-8px, -50%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--gold);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--border-strong);
}

/* hex insignia */
.hexa {
  width: 64px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  position: relative;
  flex: none;
}
.hexa .inner {
  width: 56px; height: 64px;
  background: var(--ink);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
}
.hexa .inner img { width: 30px; height: 30px; border-radius: 8px; }
.hexa .inner .lv {
  font-family: var(--font-head); font-weight: 700;
  font-size: 11px; color: var(--gold); letter-spacing: 0.05em;
}

/* stats strip */
.stat-strip { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 3px;
  text-align: left;
}
.stat.primary { border-color: var(--border-strong); background: linear-gradient(160deg, var(--gold-soft), var(--surface) 70%); }
.stat .k {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--muted); text-transform: uppercase;
}
.stat .k svg { width: 12px; height: 12px; color: var(--gold); }
.stat .v { font-family: var(--font-head); font-weight: 700; font-size: 19px; line-height: 1.1; }
.stat .v small { font-size: 10px; color: var(--muted); font-family: var(--font-body); }
.stat .sub { font-size: 11px; color: var(--dim); }

/* deal / task rows */
.deal {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 14px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: var(--font-body);
  width: 100%;
}
.deal .chip {
  width: 42px; height: 42px; flex: none;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  color: var(--gold);
}
.deal .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.deal .ttl { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal .tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.deal .meta { font-size: 11.5px; color: var(--dim); }
.deal .pay { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.deal .pay .p { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--gold); }
.deal .pay .p small { font-size: 10px; color: var(--muted); font-family: var(--font-body); }
.deal .pay .u { font-size: 11px; color: var(--muted); }
.deal.locked { opacity: 0.55; }

/* inputs */
.bz-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 13px;
}
.bz-input::placeholder { color: var(--dim); }
.bz-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px; display: block;
}

/* tabs */
.tabs { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.tabs .tab {
  flex: 1; text-align: center;
  padding: 8px 4px;
  border-radius: 9px;
  font-size: 12.5px; font-weight: 700;
  color: var(--muted);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body);
}
.tabs .tab.on { background: var(--gold); color: var(--ink); }

/* misc */
.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 11.5px; }
.gold { color: var(--gold); }
.bz-light .gold { color: #b07a10; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 4px; }
.divider { height: 1px; background: var(--border); margin: 4px 0; }

/* mascot block */
.mascot { display: flex; justify-content: center; }
.mascot img { width: 120px; height: 120px; border-radius: 28px; }
.bz.no-mascot .mascot { display: none; }

/* ============================================================
   ADMIN (desktop)
   ============================================================ */
.adm {
  display: flex;
  width: 100%; min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  font-family: var(--font-body);
  border-radius: 12px;
  overflow: hidden;
}
/* admin is comb-light content + hive-ink sidebar regardless of phone theme */
.adm-side {
  width: 232px; flex: none;
  background: #15110A;
  color: #FFF6E2;
  display: flex; flex-direction: column;
  padding: 14px 10px;
  gap: 4px;
}
.adm-side .brandcard {
  display: flex; align-items: center; gap: 10px;
  background: rgba(245, 183, 49, 0.08);
  border: 1px solid rgba(245, 183, 49, 0.22);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}
.adm-side .brandcard img { width: 32px; height: 32px; border-radius: 9px; }
.adm-side .brandcard .nm { font-family: var(--font-head); font-weight: 700; font-size: 15px; line-height: 1.1; }
.adm-side .brandcard .nm b { color: #F5B731; }
.adm-side .brandcard .sb { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #B9A47A; margin-top: 2px; }
.adm-side .grp {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #857450;
  padding: 12px 10px 5px;
  display: flex; align-items: center; gap: 6px;
}
.adm-side .grp::before {
  content: ""; width: 7px; height: 8px; background: #F5B731;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.adm-side .nav-i {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border-radius: 9px;
  color: #B9A47A;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.adm-side .nav-i svg { width: 15px; height: 15px; flex: none; }
.adm-side .nav-i.on {
  color: #FFF6E2;
  background: rgba(245, 183, 49, 0.12);
  border-color: rgba(245, 183, 49, 0.25);
}
.adm-side .nav-i.on::after {
  content: ""; margin-left: auto;
  width: 6px; height: 7px; background: #F5B731;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.adm-main { flex: 1; min-width: 0; background: var(--bg); padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; }
.adm.bz-light .adm-main { background: #FFF6E2; }

.adm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.adm-head .kicker {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
}
.adm-head h1 { font-size: 26px; font-weight: 700; margin-top: 4px; }
.adm-head .sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }

.adm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.adm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.adm-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 15px;
  display: flex; flex-direction: column; gap: 6px;
}
.adm-tile .k { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.adm-tile .k svg { width: 15px; height: 15px; color: var(--gold-deep); }
.adm-tile .v { font-family: var(--font-head); font-weight: 700; font-size: 26px; }
.adm-tile .h { font-size: 11px; color: var(--dim); }

/* table */
.adm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.adm-table th {
  text-align: left;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.adm-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: none; }

.adm-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--gold-soft); color: var(--gold-deep);
  font-family: var(--font-head); font-weight: 700; font-size: 10.5px;
}