/* demov2 customer dashboard SPA — reconstructed stylesheet (2026-08-12).
   The original Vite CSS asset was never recovered; class names come from
   the recovered bundle (dash/index-B-kdEp9X.js). Dark glass theme matching
   the site tokens. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  background: radial-gradient(1100px 550px at 15% -10%, rgba(34, 197, 94, .08), transparent 60%),
              radial-gradient(800px 500px at 95% 115%, rgba(34, 197, 94, .05), transparent 60%),
              #0a0a0b;
  color: #f4f4f5;
  min-height: 100vh;
}

a { color: #22c55e; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* ── boot / auth screen ─────────────────────────────────────────────── */
.boot { display: flex; align-items: center; justify-content: center; min-height: 100vh; color: #a1a1aa; font-size: 14px; }
.auth-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.auth-card {
  width: 100%; max-width: 420px;
  background: rgba(22, 22, 24, .65); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;
  padding: 40px 36px; text-align: center;
}
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.auth-logo, .brand-logo {
  width: 38px; height: 38px; border-radius: 11px; background: #161618;
  border: 1px solid #2a2a2e; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #22c55e;
}
.auth-brand-name, .brand-name { font-size: 19px; font-weight: 700; }
.auth-title { font-size: 22px; font-weight: 700; margin: 14px 0 6px; }
.auth-sub { font-size: 13px; color: #a1a1aa; margin-bottom: 24px; }
.auth-form { text-align: left; }
.auth-form .field label { font-size: 13px; color: #a1a1aa; margin-bottom: 5px; }

/* ── app shell ──────────────────────────────────────────────────────── */
.app { max-width: 1080px; margin: 0 auto; padding: 24px 24px 72px; }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.topbar-left h1 { font-size: 22px; font-weight: 700; }
.topbar-left .muted { font-size: 13px; margin-top: 2px; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.user-chip { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); padding: 7px 14px 7px 7px; border-radius: 999px; font-size: 13px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(34, 197, 94, .2); color: #22c55e; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.user-name { font-weight: 600; }

/* ── generic glass panel ────────────────────────────────────────────── */
.panel {
  background: rgba(22, 22, 24, .6); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px;
  padding: 20px 22px; margin-bottom: 18px;
}
.panel-wide { padding: 24px 26px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-head h2 { font-size: 16px; font-weight: 600; }
.panel-meta { font-size: 13px; color: #a1a1aa; }
.panel-meta.ok { color: #22c55e; }

/* ── forms / inputs ─────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: #a1a1aa; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(10, 10, 11, .7); border: 1px solid rgba(255, 255, 255, .12);
  color: #f4f4f5; padding: 10px 12px; border-radius: 10px; font-size: 14px;
}
.field input:focus, .field select:focus { outline: none; border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .15); }
.input { margin-bottom: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── buttons / segmented ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.btn-accent { background: #22c55e; color: #06130a; }
.btn-accent:hover { background: #16a34a; text-decoration: none; }
.btn-block { width: 100%; }
.btn.sm, .btn-sm, .icon-btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.btn.ghost { background: rgba(255, 255, 255, .04); color: #f4f4f5; border-color: rgba(255, 255, 255, .12); }
.btn.ghost:hover { border-color: #22c55e; text-decoration: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: #f4f4f5; border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.icon-btn:hover { border-color: #22c55e; }
.ghost-link { color: #a1a1aa; font-size: 13px; }

.seg { display: inline-flex; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button, .seg-btn {
  background: none; border: none; color: #a1a1aa; padding: 7px 14px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
}
.seg button[aria-pressed="true"], .seg-btn.active { background: rgba(34, 197, 94, .15); color: #22c55e; }
.seg-inline { background: rgba(34, 197, 94, .15); color: #22c55e; }
.auth-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #a1a1aa; margin-top: 16px; }
.auth-form input, .auth-form .field input { width: 100%; }

/* ── link rows (the product) ────────────────────────────────────────── */
.link-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.link-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.link-select { font-size: 13px; }
.link-url-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; flex-wrap: wrap; }
.link-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #22c55e; word-break: break-all; }
.link-meta { font-size: 12px; color: #71717a; }
.link-dest { font-size: 13px; color: #a1a1aa; }

/* manage actions */
.manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.manage-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.manage-active { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 8px; }
.manage-active-label { color: #a1a1aa; }
.manage-note { font-size: 13px; color: #a1a1aa; margin-top: 10px; }
.manage-msg.err { font-size: 13px; color: #f87171; margin-top: 8px; }
.manage-hint { font-size: 12px; color: #71717a; margin-top: 6px; }
.manage-hint.err { color: #f87171; }
.manage-hint.ok { color: #22c55e; }
.manage-hint.live-rate { color: #22c55e; }
.manage-hint.tg-note { color: #a1a1aa; }

/* ── stats ──────────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; padding: 14px 16px; }
.stat-icon { font-size: 16px; }
.stat-label { font-size: 12px; color: #71717a; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.stat-value { font-size: 22px; font-weight: 700; }
.stat-sub { font-size: 12px; color: #71717a; margin-top: 2px; }
.stat-body { font-size: 13px; color: #a1a1aa; margin-top: 4px; }

/* ── health ─────────────────────────────────────────────────────────── */
.health-grid { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.health-item { display: flex; align-items: center; gap: 8px; font-size: 13px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); padding: 8px 14px; border-radius: 999px; }
.health-label { color: #a1a1aa; }
.health-warn { color: #fbbf24; }

.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #22c55e; font-weight: 600; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pulse 1.6s ease infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ── timeline (visits) ──────────────────────────────────────────────── */
.timeline { margin-top: 12px; }
.timeline-axis { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #71717a; margin-bottom: 10px; }
.timeline-col { display: flex; flex-direction: column; gap: 6px; }

/* ── bars (daily usage) ─────────────────────────────────────────────── */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin: 12px 0 8px; }
.bar-track { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.bar-fill { width: 70%; max-width: 26px; background: #22c55e; border-radius: 5px 5px 2px 2px; min-height: 3px; }
.bar-count { font-size: 11px; color: #a1a1aa; }
.bar-label { font-size: 10px; color: #71717a; }

/* ── template picker ────────────────────────────────────────────────── */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tpl-card {
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px; padding: 14px; cursor: pointer; text-align: center;
}
.tpl-card:hover { border-color: #22c55e; }
.tpl-card-name { font-size: 14px; font-weight: 600; }
.tpl-card-desc { font-size: 12px; color: #71717a; margin-top: 3px; }
.tpl-live { font-size: 11px; color: #22c55e; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }
.tpl-preview-wrap { margin-top: 14px; }
.tpl-preview-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #71717a; margin-bottom: 8px; }
.tpl-preview-frame { width: 100%; height: 380px; background: #fff; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; }

/* ── checkout / payments ────────────────────────────────────────────── */
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checkout-block { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; padding: 16px 18px; }
.checkout-amount { font-size: 26px; font-weight: 700; }
.checkout-address { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #a1a1aa; word-break: break-all; margin: 10px 0; }
.checkout-qr { width: 180px; height: 180px; background: #fff; border-radius: 12px; padding: 10px; margin: 10px 0; }
.checkout-pay { margin-top: 12px; }
.checkout-status-label { font-size: 13px; color: #a1a1aa; }
.checkout-status-msg { font-size: 13px; margin-top: 4px; }
.checkout-status-msg.err { color: #f87171; }
.checkout-tx { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #a1a1aa; word-break: break-all; }

/* ── upgrade / plans ────────────────────────────────────────────────── */
.plan-panel { text-align: center; padding: 32px 28px; }
.upgrade-intro { font-size: 13px; color: #a1a1aa; margin: 8px 0 18px; }
.upgrade-price { font-size: 38px; font-weight: 800; margin-bottom: 4px; }
.upgrade-price small { font-size: 14px; color: #71717a; font-weight: 500; }
.upgrade-features { text-align: left; margin: 18px 0; font-size: 13px; line-height: 2.1; color: #d4d4d8; }
.upgrade-methods { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.plan-badge { display: inline-block; background: rgba(34, 197, 94, .12); color: #22c55e; border: 1px solid rgba(34, 197, 94, .25); font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; }
.pro { color: #22c55e; font-weight: 700; }

/* ── table (visits list) ────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #71717a; padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.table td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, .04); color: #d4d4d8; }
.table-empty { text-align: center; color: #71717a; padding: 30px 0; font-size: 13px; }

/* ── telegram / misc ────────────────────────────────────────────────── */
.tg-block { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.tg-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; font-weight: 700; letter-spacing: .2em; color: #22c55e; }
.tg-toggle { margin-top: 10px; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.mono.email-cell { color: #22c55e; }
.nowrap { white-space: nowrap; }
.muted { color: #a1a1aa; }
.err { color: #f87171; }
.flag { font-size: 12px; color: #a1a1aa; }
.banner { background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .25); color: #d1fae5; border-radius: 12px; padding: 12px 16px; font-size: 13px; margin-bottom: 16px; }
.loading { color: #71717a; font-size: 13px; padding: 20px 0; }
.empty-state, .empty-line { color: #71717a; font-size: 13px; text-align: center; padding: 26px 0; }
.copied { color: #22c55e; font-size: 12px; }
.email-grab-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.email-grab-label { font-size: 12px; color: #a1a1aa; }
.email-grab-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #22c55e; word-break: break-all; }
.email-grab-hint { font-size: 12px; color: #71717a; }