:root {
  --bg:        #1a1a2e;
  --card:      #16213e;
  --card2:     #1d2d50;
  --accent:    #0f3460;
  --cta:       #e94560;
  --cta-hover: #c73652;
  --text:      #e0e0e0;
  --text-dim:  #8892a4;
  --border:    #263354;
  --green:     #2ec97e;
  --radius:    12px;
  --shadow:    0 4px 24px rgba(0,0,0,0.4);
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}

a { color: var(--cta); }

/* ── Auth ── */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 36px; width: 360px;
}
.auth-title { font-size: 1.3rem; margin-bottom: 4px; }
.auth-subtitle { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 24px; }
.auth-error {
  background: rgba(230,57,70,0.15); border: 1px solid var(--cta); color: #ff8089;
  border-radius: 8px; padding: 10px 14px; font-size: 0.85rem; margin-bottom: 12px;
}

/* ── Forms ── */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 4px; }
input, textarea, select {
  width: 100%; background: var(--card2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; color: var(--text); font-size: 0.9rem;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--cta); }

.btn {
  display: inline-block; background: var(--cta); color: #fff; border: none; border-radius: 8px;
  padding: 10px 18px; font-size: 0.9rem; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--cta-hover); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

/* ── App shell ── */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--card);
}
header h1 { font-size: 1.1rem; }
nav.tabs { display: flex; gap: 4px; padding: 0 24px; background: var(--card); border-bottom: 1px solid var(--border); }
nav.tabs a {
  padding: 12px 16px; color: var(--text-dim); text-decoration: none; font-size: 0.85rem;
  border-bottom: 2px solid transparent;
}
nav.tabs a.active, nav.tabs a:hover { color: var(--text); border-bottom-color: var(--cta); }

main { padding: 24px; max-width: 1100px; margin: 0 auto; }

table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
th { color: var(--text-dim); font-weight: 600; background: var(--card2); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.02); }

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
}
.badge-active { background: rgba(46,201,126,0.15); color: var(--green); }
.badge-pending, .badge-past_due { background: rgba(244,162,97,0.15); color: #f4a261; }
.badge-canceled, .badge-unpaid { background: rgba(230,57,70,0.15); color: var(--cta); }
.badge-live { background: rgba(46,201,126,0.15); color: var(--green); }
.badge-coming_soon { background: rgba(136,146,164,0.15); color: var(--text-dim); }
.badge-quote_based { background: rgba(15,52,96,0.4); color: #7fa8d9; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.card h2 { font-size: 1rem; margin-bottom: 12px; }

.row { display: flex; gap: 12px; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; }
.muted { color: var(--text-dim); font-size: 0.85rem; }
.mt { margin-top: 16px; }