/* ── Dashboard shell ────────────────────────────────────────────────────── */
.dash-body { background: #07000f; color: #ccc; font-family: 'Inter', sans-serif;
             margin: 0; min-height: 100vh; }

.dash-nav { display: flex; align-items: center; gap: 16px;
            padding: 0 32px; height: 60px;
            background: rgba(13,0,32,.97); border-bottom: 1px solid rgba(102,0,255,.3);
            position: sticky; top: 0; z-index: 100; }
.dash-nav-logo { margin-right: auto; }
.dash-nav-email { font-size: 13px; color: #888; }
.dash-nav-link, .dash-logout { font-size: 13px; color: #a060ff;
                                text-decoration: none; padding: 6px 14px;
                                border: 1px solid rgba(102,0,255,.4);
                                border-radius: 6px; transition: background .2s; }
.dash-nav-link:hover, .dash-logout:hover { background: rgba(102,0,255,.15); }
.dash-nav-links { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }

.dash-main { padding: 40px 32px; max-width: 1100px; margin: 0 auto; }

.dash-page-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.dash-page-sub   { font-size: 14px; color: #666; margin: 0 0 32px; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.dash-card { background: rgba(255,255,255,.04);
             border: 1px solid rgba(255,255,255,.08);
             border-radius: 12px; padding: 28px; margin-bottom: 20px; }
.dash-card-title { font-size: 13px; font-weight: 700; letter-spacing: .08em;
                   color: #a060ff; text-transform: uppercase; margin: 0 0 20px; }

/* ── Stat row (admin overview) ──────────────────────────────────────────── */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
              gap: 16px; margin-bottom: 28px; }
.dash-stat  { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
              border-radius: 10px; padding: 20px 24px; }
.dash-stat-num   { font-size: 28px; font-weight: 700; color: #fff; }
.dash-stat-label { font-size: 12px; color: #666; margin-top: 4px; }

/* ── Status badges ──────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px;
         font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.badge-active    { background: rgba(0,220,100,.15); color: #00dc64; border: 1px solid rgba(0,220,100,.3); }
.badge-pending   { background: rgba(255,170,0,.15);  color: #ffaa00; border: 1px solid rgba(255,170,0,.3); }
.badge-expired   { background: rgba(255,0,85,.12);   color: #ff4466; border: 1px solid rgba(255,0,85,.3); }
.badge-suspended { background: rgba(255,0,85,.12);   color: #ff4466; border: 1px solid rgba(255,0,85,.3); }
.badge-paid      { background: rgba(0,180,255,.12);  color: #40c0ff; border: 1px solid rgba(0,180,255,.3); }
.badge-none      { background: rgba(255,255,255,.06); color: #888;   border: 1px solid rgba(255,255,255,.1); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.dash-table-wrap { overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th { text-align: left; padding: 10px 14px; font-size: 11px;
                 letter-spacing: .08em; color: #666; text-transform: uppercase;
                 border-bottom: 1px solid rgba(255,255,255,.08); }
.dash-table td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.05);
                 color: #ccc; vertical-align: middle; }
.dash-table tr:hover td { background: rgba(255,255,255,.02); }
.dash-table .mono { font-family: monospace; font-size: 12px; color: #a0c0ff; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-dash         { padding: 8px 18px; border-radius: 7px; font-size: 13px;
                    font-weight: 600; cursor: pointer; border: none; transition: opacity .2s; }
.btn-dash:hover   { opacity: .85; }
.btn-dash:disabled{ opacity: .4; cursor: not-allowed; }
.btn-purple { background: #6600ff; color: #fff; }
.btn-red    { background: #ff0055; color: #fff; }
.btn-ghost  { background: transparent; color: #a060ff;
              border: 1px solid rgba(102,0,255,.5); }
.btn-sm     { padding: 5px 12px; font-size: 12px; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.dash-form-label { display: block; font-size: 12px; color: #888; margin-bottom: 5px; }
.dash-form-input { width: 100%; box-sizing: border-box;
                   background: rgba(255,255,255,.06);
                   border: 1px solid rgba(255,255,255,.12);
                   border-radius: 7px; color: #fff; padding: 10px 14px;
                   font-size: 14px; margin-bottom: 16px; }
.dash-form-input:focus { outline: none; border-color: rgba(102,0,255,.6); }
.dash-error   { color: #ff4466; font-size: 13px; margin-bottom: 12px; }
.dash-success { color: #40dd88; font-size: 13px; margin-bottom: 12px; }

/* ── Auth page (login / register) ───────────────────────────────────────── */
.auth-wrap  { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; background: #07000f; }
.auth-box   { background: rgba(255,255,255,.04); border: 1px solid rgba(102,0,255,.35);
              border-radius: 14px; padding: 44px 40px; width: 380px; }
.auth-logo  { text-align: center; margin-bottom: 28px; }
.auth-title { font-size: 20px; font-weight: 700; color: #fff;
              margin: 0 0 6px; text-align: center; }
.auth-sub   { font-size: 13px; color: #666; text-align: center; margin: 0 0 28px; }
.auth-link  { color: #a060ff; text-decoration: none; }

/* ── Referral link box ───────────────────────────────────────────────────── */
.ref-link-box { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.ref-link-input { flex: 1; background: rgba(255,255,255,.06);
                  border: 1px solid rgba(255,255,255,.12); border-radius: 7px;
                  color: #a0c0ff; padding: 9px 12px; font-size: 13px;
                  font-family: monospace; }