/* ═══════════════════════════════════════════════════════════════════
   WalletLab CRM - desktop manager dashboard
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --bg: #F3F4F0;
  --surface: #FFFFFF;
  --surface-2: #FAFBF8;
  --ink: #0A0F0C;
  --ink-2: #39443D;
  --muted: #6F7A72;
  --muted-2: #98A29B;
  --line: rgba(10, 15, 12, 0.08);
  --line-2: rgba(10, 15, 12, 0.13);
  --green: #0E9D5C;
  --green-bright: #2FD46A;
  --green-deep: #06271B;
  --green-soft: rgba(14, 157, 92, 0.10);
  --amber: #E0A33B;
  --red: #E0563B;
  --blue: #2F7BD4;

  --side: #06271B;
  --side-2: #0A3A28;
  --side-ink: #EAF6EF;
  --side-mut: #74998A;

  --r-sm: 9px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --pill: 999px;

  --display: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--display);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(10,15,12,.14); border-radius: 99px; border: 3px solid var(--bg); }
::selection { background: var(--green-bright); color: var(--green-deep); }

.app { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }

/* ── Sidebar ───────────────────────────────────────────────────────── */
.side {
  background: var(--side); color: var(--side-ink);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 22px 16px;
  overflow: hidden;
}
.side::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 40% at 20% 0%, rgba(47,212,106,.14), transparent 60%); pointer-events: none; }
.side > * { position: relative; }
.side-brand { display: flex; align-items: center; gap: 11px; padding: 6px 10px 24px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.03em; }
.side-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(145deg, var(--green-bright), var(--green)); display: grid; place-items: center; color: var(--green-deep); box-shadow: 0 4px 14px rgba(47,212,106,.35); }
.side-sec { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--side-mut); padding: 16px 12px 8px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border-radius: 12px; color: var(--side-ink);
  font-size: 14.5px; font-weight: 500; text-align: left;
  transition: background .18s, color .18s; position: relative;
}
.nav-item .ic { color: var(--side-mut); transition: color .18s; }
.nav-item:hover { background: rgba(255,255,255,.05); }
.nav-item.on { background: rgba(47,212,106,.15); color: #fff; font-weight: 600; }
.nav-item.on .ic { color: var(--green-bright); }
.nav-item .badge { margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 600; background: rgba(47,212,106,.2); color: var(--green-bright); padding: 2px 7px; border-radius: 99px; }
.side-spacer { flex: 1; }
.shop-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px; display: flex; align-items: center; gap: 11px; margin-bottom: 12px; cursor: pointer; transition: background .18s; }
.shop-card:hover { background: rgba(255,255,255,.09); }
.shop-logo { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(145deg, var(--green-bright), var(--green)); display: grid; place-items: center; color: var(--green-deep); font-weight: 800; font-size: 15px; flex-shrink: 0; }
.shop-name { font-size: 13.5px; font-weight: 600; }
.shop-meta { font-size: 11.5px; color: var(--side-mut); }
.side-user { display: flex; align-items: center; gap: 11px; padding: 8px 6px; }
.side-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, #6fd99a, #2a8f5d); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.side-user .nm { font-size: 13.5px; font-weight: 600; }
.side-user .rl { font-size: 11.5px; color: var(--side-mut); }

/* ── Main ──────────────────────────────────────────────────────────── */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  padding: 18px 32px; background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--line);
}
.page-title { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.page-sub { font-size: 13px; color: var(--muted); margin-top: 1px; }
.search { margin-left: auto; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); width: 280px; color: var(--muted); }
.search input { border: 0; outline: 0; background: none; font-family: inherit; font-size: 14px; color: var(--ink); width: 100%; }
.icon-btn { width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); transition: background .15s, border-color .15s; position: relative; }
.icon-btn:hover { border-color: var(--line-2); }
.icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright); border: 2px solid var(--surface); }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--pill); font-weight: 600; font-size: 14px; transition: transform .15s, box-shadow .2s, background .15s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn.green { background: linear-gradient(145deg, var(--green-bright), var(--green)); color: var(--green-deep); box-shadow: 0 6px 18px rgba(14,157,92,.3); }
.btn.green:hover { box-shadow: 0 10px 26px rgba(14,157,92,.42); }
.btn.dark { background: var(--ink); color: var(--bg); }
.btn.ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: var(--line-2); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }

.content { padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 20px; }

/* ── KPI cards ─────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; }
.kpi:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(6,39,27,.4); }
.kpi-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.kpi-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
.kpi-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi-val { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.kpi-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.delta.up { background: var(--green-soft); color: var(--green); }
.delta.down { background: rgba(224,86,59,.1); color: var(--red); }
.kpi-foot { font-size: 12px; color: var(--muted-2); }
.spark { position: absolute; right: 14px; top: 16px; width: 76px; height: 30px; opacity: .9; }

/* ── Panel ─────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 24px; display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.panel-title { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.panel-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: var(--pill); padding: 3px; }
.seg button { height: 30px; padding: 0 13px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--muted); transition: background .15s, color .15s; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.06); }

/* ── Area chart ────────────────────────────────────────────────────── */
.chart { width: 100%; }
.chart-legend { display: flex; gap: 18px; margin-top: 14px; }
.lg { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.lg .sw { width: 11px; height: 11px; border-radius: 3px; }

/* ── Donut / retention ─────────────────────────────────────────────── */
.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; flex: 1; justify-content: center; }
.donut { width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.donut::before { content: ''; position: absolute; inset: 20px; background: var(--surface); border-radius: 50%; }
.donut-c { position: relative; text-align: center; }
.donut-c .v { font-family: var(--display); font-size: 36px; font-weight: 700; letter-spacing: -0.04em; }
.donut-c .l { font-size: 12px; color: var(--muted); }
.donut-legend { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.dl { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dl .sw { width: 10px; height: 10px; border-radius: 3px; }
.dl .val { margin-left: auto; font-weight: 600; }

/* ── Activity feed ─────────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 4px; }
.feed-item { display: flex; gap: 12px; padding: 11px 8px; border-radius: 12px; transition: background .15s; }
.feed-item:hover { background: var(--surface-2); }
.feed-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.feed-ic.stamp { background: var(--green-soft); color: var(--green); }
.feed-ic.reward { background: rgba(224,163,59,.14); color: var(--amber); }
.feed-ic.join { background: rgba(47,123,212,.12); color: var(--blue); }
.feed-ic.push { background: rgba(10,15,12,.06); color: var(--ink-2); }
.feed-txt { font-size: 13.5px; line-height: 1.35; }
.feed-txt b { font-weight: 600; }
.feed-time { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }

/* ── Members table ─────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; padding: 0 14px 14px; }
.table td { padding: 13px 14px; border-top: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
.table tr:hover td { background: var(--surface-2); }
.cust { display: flex; align-items: center; gap: 12px; }
.cust-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.cust-nm { font-weight: 600; }
.cust-em { font-size: 12px; color: var(--muted); }
.prog { display: flex; align-items: center; gap: 10px; }
.prog-bar { width: 90px; height: 7px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.prog-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--green), var(--green-bright)); }
.prog-num { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; }
.tag.active { background: var(--green-soft); color: var(--green); }
.tag.risk { background: rgba(224,163,59,.14); color: #b5791d; }
.tag.new { background: rgba(47,123,212,.12); color: var(--blue); }
.tag.vip { background: rgba(10,15,12,.06); color: var(--ink); }
.row-act { display: flex; gap: 6px; justify-content: flex-end; }
.row-btn { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); transition: all .15s; }
.row-btn:hover { color: var(--green); border-color: var(--green); }

/* ── Card preview + push composer ──────────────────────────────────── */
.loycard { border-radius: 20px; padding: 18px; background: linear-gradient(150deg, #0d4a33, #06271B); color: #EAF6EF; box-shadow: 0 24px 50px -20px rgba(6,39,27,.5), inset 0 1px 0 rgba(255,255,255,.07); }
.loycard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.loycard-brand { display: flex; align-items: center; gap: 9px; }
.loycard-logo { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(145deg, var(--green-bright), var(--green)); display: grid; place-items: center; color: var(--green-deep); font-weight: 800; font-size: 13px; }
.loycard-nm { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.loycard-sub { font-size: 9px; font-family: var(--mono); color: rgba(234,246,239,.5); letter-spacing: .06em; }
.loycard-count { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.loycard-count .b { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -0.04em; }
.loycard-count .o { font-size: 15px; opacity: .5; }
.loycard-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.lcs { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.lcs.on { background: linear-gradient(145deg, var(--green-bright), var(--green)); color: var(--green-deep); }
.lcs.off { border: 1.4px dashed rgba(234,246,239,.2); }
.loycard-bar { height: 5px; border-radius: 99px; background: rgba(234,246,239,.12); overflow: hidden; }
.loycard-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-bright)); border-radius: 99px; }

.compose { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.field input, .field textarea, .field select { font-family: inherit; font-size: 13.5px; color: var(--ink); padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); outline: 0; transition: border-color .15s; resize: none; }
.field input:focus, .field textarea:focus { border-color: var(--green); }
.seg-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); transition: all .15s; }
.chip.on { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }

.push-preview { background: var(--green-deep); border-radius: 16px; padding: 16px; position: relative; overflow: hidden; }
.push-preview::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 0%, rgba(47,212,106,.16), transparent 60%); }
.pp-note { position: relative; background: rgba(234,246,239,.94); border-radius: 14px; padding: 12px; display: flex; gap: 10px; }
.pp-ic { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(145deg, var(--green-bright), var(--green)); display: grid; place-items: center; color: var(--green-deep); flex-shrink: 0; }
.pp-meta { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: #5a6b62; }
.pp-title { font-size: 13px; font-weight: 700; color: #0a0f0c; }
.pp-body { font-size: 12px; color: #3a453e; line-height: 1.3; margin-top: 1px; }

/* ── Campaign cards ────────────────────────────────────────────────── */
.camp { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.camp:first-child { border-top: 0; }
.camp-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; flex-shrink: 0; }
.camp-nm { font-size: 14px; font-weight: 600; }
.camp-meta { font-size: 12px; color: var(--muted); }
.camp-stat { margin-left: auto; text-align: right; }
.camp-stat .v { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.camp-stat .l { font-size: 11px; color: var(--muted); }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
}