/*
 * Hold My Beer — shared design system.
 *
 * Ported from the approved mockups:
 *   .superpowers/brainstorm/23707-1783858463/content/admin-dashboard.html
 *   .superpowers/brainstorm/23707-1783858463/content/waiter-app.html
 *   .superpowers/brainstorm/23707-1783858463/content/landing.html
 *
 * Only the SHARED, reusable primitives live here (buttons, cards, badges,
 * gradients, sidebar shell, tab bar, wizard step indicator). Page-specific
 * markup (charts, funnels, revolver visual, tables, etc.) is left for the
 * templates that need it.
 */

:root{
  --grad-a:#6366f1; --grad-b:#a855f7; --cyan:#06b6d4;
  --win:#10b981; --pay:#10b981; --ink:#0f172a;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
}

/* ---------- Gradients ---------- */

.grad-text{ background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-bg{ background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); }

/* ---------- Buttons ---------- */

.btn-grad{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px;
  border-radius:12px; font-weight:700; color:#fff; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  box-shadow:0 10px 24px rgba(124,58,237,.25); transition:.15s; }
.btn-grad:hover{ transform:translateY(-1px); }
.btn-ghost{ display:inline-flex; align-items:center; gap:8px; padding:12px 18px;
  border-radius:12px; font-weight:600; color:#334155; background:#fff;
  border:1px solid #e2e8f0; cursor:pointer; }

/* ---------- Cards / KPI / badges ---------- */

.card{ background:#fff; border:1px solid #f1f5f9; border-radius:16px; padding:18px; }

.kpi{ background:#fff; border:1px solid #f1f5f9; border-radius:14px; padding:14px 16px; }
.kpi .lbl{ font-size:11.5px; color:#94a3b8; }
.kpi .val{ font-size:23px; font-weight:800; letter-spacing:-.02em; }
.kpi .val.grad{ background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.kpi .delta{ font-size:11.5px; font-weight:700; }
.kpi .delta.up{ color:var(--pay); }
.kpi .delta.down{ color:#ef4444; }
/* sparkline */
.kpi .spark{ display:flex; align-items:flex-end; gap:2px; height:22px; margin-top:8px; }
.kpi .spark span{ flex:1; border-radius:2px; background:#e0e7ff; }

.badge{ padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.badge-win{ background:#d1fae5; color:#047857; }   /* бесплатно */
.badge-lose{ background:#ffe4e6; color:#be123c; }   /* оплата */

/* ---------- Admin shell (desktop, /admin) ---------- */
/* Ported from admin-dashboard.html: .ad / .ad-side / .ad-logo / .ad-nav / .ad-user / .ad-av */

.admin-shell{ display:grid; grid-template-columns:210px 1fr; min-height:640px;
  background:#f8fafc; border-radius:16px; overflow:hidden;
  box-shadow:0 10px 40px rgba(15,23,42,.10); color:var(--ink); }

.admin-sidebar{ background:#0f172a; color:#cbd5e1; padding:18px 14px;
  display:flex; flex-direction:column; }
.admin-sidebar .logo{ font-weight:800; font-size:13px; letter-spacing:.06em;
  background:linear-gradient(90deg,#818cf8,#c084fc); -webkit-background-clip:text;
  background-clip:text; color:transparent; padding:6px 8px 18px; }
.admin-sidebar nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:10px; font-size:13.5px; color:#94a3b8; margin-bottom:2px;
  text-decoration:none; }
.admin-sidebar nav a.active{ background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:#fff; font-weight:600; }
.admin-sidebar nav a .ic{ width:16px; height:16px; border-radius:5px;
  background:currentColor; opacity:.55; }
.admin-sidebar nav a.active .ic{ opacity:1; background:#fff; }
.admin-sidebar .user{ margin-top:auto; display:flex; align-items:center; gap:10px;
  padding:10px 8px; font-size:12px; color:#94a3b8; border-top:1px solid #1e293b; }
.admin-sidebar .avatar{ width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); }

.admin-main{ padding:22px 24px; overflow:auto; }

/* ---------- Tab bar (mobile, /client and /p/{slug}) ---------- */
/* Ported from waiter-app.html: .navbar */

.tabbar{ display:flex; border-top:1px solid #eef2ff; background:#fff; }
.tabbar a,
.tabbar div.item{ flex:1; text-align:center; padding:9px 0 11px; font-size:9px;
  color:#94a3b8; text-decoration:none; }
.tabbar a.active,
.tabbar div.item.active{ color:var(--grad-a); font-weight:700; }
.tabbar .icon{ width:18px; height:18px; border-radius:6px; background:currentColor;
  opacity:.5; margin:0 auto 3px; }
.tabbar a.active .icon,
.tabbar div.item.active .icon{ opacity:1; }

/* ---------- Wizard step indicator (mobile sale flow) ---------- */
/* Ported from waiter-app.html: .steps-h */

.wizard-steps{ display:flex; gap:6px; margin-bottom:14px; }
.wizard-steps i{ flex:1; height:5px; border-radius:3px; background:#e2e8f0; }
.wizard-steps i.on{ background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); }