:root { --brand: #0f766e; --brand-dark: #115e59; --gold: #f59e0b; }
body { background: #f4f6f8; }
.app-nav { background: linear-gradient(90deg, var(--brand-dark), var(--brand)); }
.impersonate-bar { background: #fde68a; text-align: center; padding: 4px; font-size: .85rem; }
.btn-brand { background: var(--brand); color: #fff; border: 0; }
.btn-brand:hover { background: var(--brand-dark); color: #fff; }
.card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.stat-card .num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-card .lbl { color: #6b7280; font-size: .85rem; }

.stars { display: flex; flex-wrap: wrap; gap: 6px; }
.star { width: 34px; height: 34px; border-radius: 50%; background: #e5e7eb; color: #9ca3af;
        display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font-size: .95rem; position: relative; }
.star.on { background: var(--gold); color: #fff; }
.star.milestone { outline: 2px dashed var(--brand); outline-offset: 2px; }
.star small { position: absolute; bottom: -18px; font-size: .65rem; color: var(--brand); font-weight: 700; }
.stars-lg .star { width: 48px; height: 48px; font-size: 1.3rem; }
.stars { padding-bottom: 18px; }

.phone-search input { font-size: 1.6rem; letter-spacing: 1px; }
.reward-chip { border: 2px dashed var(--brand); border-radius: 10px; padding: 10px 14px; background: #f0fdfa; }
.reward-chip .code { font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: 1px; }

/* Public join page */
.join-wrap { max-width: 480px; margin: 0 auto; }
.join-hero { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; border-radius: 16px; padding: 24px; }
.consent-text { font-size: .78rem; color: #4b5563; }
pre.payload { max-height: 260px; overflow: auto; background: #111827; color: #d1fae5; padding: 10px; border-radius: 6px; font-size: .75rem; }
.app-nav .nav-link { white-space: nowrap; }
.app-nav .navbar-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }