:root {
  color-scheme: dark;
  --black: #050407;
  --surface: #121018;
  --surface-raised: #1a1622;
  --white: #fff;
  --muted: #b8afc5;
  --magenta: #e600ff;
  --violet: #6200ff;
  --border: rgba(230, 0, 255, 0.22);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--white);
  background:
    radial-gradient(circle at 80% -10%, rgba(98, 0, 255, 0.24), transparent 35rem),
    var(--black);
}

button, input, select { font: inherit; }

.login-page {
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.login-card {
  width: min(100%, 27rem);
  padding: 2.2rem;
  border: 1px solid var(--border);
  border-radius: 1.75rem;
  background: rgba(18, 16, 24, 0.96);
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.45);
}

.login-logo {
  display: block;
  width: 7rem;
  height: 7rem;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
}

.eyebrow {
  color: var(--magenta);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0.5rem; font-size: clamp(2rem, 5vw, 2.8rem); }
h2 { margin-bottom: 0; }
.intro, .page-heading p { color: var(--muted); }

label {
  display: block;
  margin: 1rem 0 0.45rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

input, select {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.85rem;
  outline: none;
  color: var(--white);
  background: rgba(255, 255, 255, 0.055);
}

input:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(230, 0, 255, 0.12);
}

button {
  cursor: pointer;
  border: 0;
  color: var(--white);
}
button:disabled { cursor: not-allowed; opacity: 0.45; }

.login-card button {
  width: 100%;
  margin-top: 1.4rem;
  padding: 0.95rem;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, var(--magenta), var(--violet));
  font-weight: 800;
}

.back-link {
  display: block;
  margin-top: 1.4rem;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
  font-size: 0.86rem;
}

.alert {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255, 88, 116, 0.45);
  border-radius: 0.8rem;
  color: #ffdbe1;
  background: rgba(190, 20, 55, 0.18);
  font-size: 0.88rem;
}

.notice {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1rem;
  border-radius: 0.85rem;
  font-size: 0.88rem;
}
.notice.success { border: 1px solid rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.1); color: #c8f9d6; }
.notice.warning { border: 1px solid rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.1); color: #ffedb2; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5rem;
  padding: 0.75rem max(1rem, calc((100vw - 74rem) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 4, 7, 0.84);
  backdrop-filter: blur(16px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--white);
  font-weight: 850;
  text-decoration: none;
}

.brand img { width: 3.3rem; height: 3.3rem; border-radius: 50%; }
.brand small { color: var(--magenta); font-size: 0.72rem; text-transform: uppercase; }

.secondary-button {
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.07);
}

.dashboard { width: min(74rem, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.page-heading p { margin-bottom: 0; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(74, 222, 128, 0.24);
  border-radius: 999px;
  color: #b8f7cb;
  background: rgba(74, 222, 128, 0.08);
  font-size: 0.82rem;
  white-space: nowrap;
}

.status i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #4ade80; }

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

.metric-card, .panel {
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(26, 22, 34, 0.96), rgba(12, 10, 16, 0.96));
}

.metric-card { display: grid; gap: 0.45rem; padding: 1.4rem; }
.metric-card span, .metric-card small { color: var(--muted); }
.metric-card strong { font-size: 1.6rem; }

.panel { padding: 1.5rem; }
.panel-heading { margin-bottom: 1.25rem; }
.apps-panel { margin-bottom: 2rem; }
.app-list { display: grid; gap: 1rem; }
.app-row {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto minmax(15rem, auto);
  align-items: center;
  gap: 1.5rem;
  padding: 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.025);
}
.stripe-settings, .vehicle-settings { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1rem; }
.stripe-settings summary, .vehicle-settings summary { cursor: pointer; color: var(--white); font-weight: 750; }
.stripe-settings summary span, .vehicle-settings summary span { margin-left: 0.5rem; color: var(--muted); font-size: 0.78rem; font-weight: 500; }
.stripe-settings summary .configured, .vehicle-settings summary .configured { color: #b8f7cb; }
.key-summary { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; margin: 1rem 0; color: var(--muted); font-size: 0.78rem; }
.stripe-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 1rem; }
.stripe-form label { margin: 0; }
.stripe-form select { width: 100%; margin-top: 0.45rem; }
.stripe-form input { margin-top: 0.45rem; }
.stripe-form .secondary-button { align-self: end; min-height: 2.8rem; }
.settings-help { margin: 0.9rem 0; color: var(--muted); font-size: 0.84rem; }
.vehicle-mapping-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-top: 1rem; }
.vehicle-mapping-form label { margin: 0; }
.vehicle-mapping-form select { margin-top: 0.45rem; }
.vehicle-mapping-form .secondary-button { grid-column: 1 / -1; justify-self: start; margin-top: 0.2rem; }
.app-identity { display: flex; align-items: center; gap: 0.8rem; }
.app-identity > div { display: grid; gap: 0.25rem; }
.app-identity small, .app-counts { color: var(--muted); font-size: 0.78rem; }
.connection-state.connected { color: #8ceaaa; }
.app-badge {
  display: grid;
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border-radius: 0.8rem;
  object-fit: cover;
  border: 1px solid rgba(230, 0, 255, 0.28);
  border-radius: 50%;
  background: var(--black);
  font-weight: 900;
}
.app-counts { display: flex; gap: 1rem; }
.app-counts span { display: grid; text-align: center; }
.app-counts strong { color: var(--white); font-size: 1rem; }
.feature-form { display: flex; align-items: center; gap: 0.8rem; }
.feature-form .secondary-button { white-space: nowrap; }
.toggle-label { display: flex; align-items: center; gap: 0.65rem; margin: 0; white-space: nowrap; }
.toggle-label input { width: 1.15rem; height: 1.15rem; accent-color: var(--magenta); }
.activity-list { display: grid; }
.activity-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}
.activity-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--magenta); }
.activity-row div { display: grid; gap: 0.2rem; }
.activity-row small, .activity-row time, .empty-state { color: var(--muted); font-size: 0.82rem; }

.admin-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  width: 16.5rem;
  padding: 1.25rem;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(10, 8, 14, 0.98);
}
.sidebar-brand { display: flex; align-items: center; gap: 0.8rem; color: var(--white); font-weight: 850; text-decoration: none; }
.sidebar-brand img { width: 3.3rem; height: 3.3rem; border-radius: 50%; }
.sidebar-brand span { display: grid; gap: 0.1rem; }
.sidebar-brand small { color: var(--magenta); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar-nav { display: grid; gap: 0.45rem; margin-top: 2.2rem; }
.sidebar-nav a { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 0.9rem; border: 1px solid transparent; border-radius: 0.85rem; color: var(--muted); font-size: 0.9rem; font-weight: 750; text-decoration: none; }
.sidebar-nav a span { display: grid; width: 1.4rem; color: var(--magenta); place-items: center; }
.sidebar-nav a:hover { color: var(--white); background: rgba(255, 255, 255, 0.05); }
.sidebar-nav a.active { border-color: var(--border); color: var(--white); background: linear-gradient(135deg, rgba(230, 0, 255, 0.14), rgba(98, 0, 255, 0.12)); }
.sidebar-footer { display: grid; gap: 0.35rem; margin-top: auto; overflow: hidden; }
.sidebar-footer small { color: var(--muted); }
.sidebar-footer strong { overflow: hidden; font-size: 0.8rem; text-overflow: ellipsis; }
.sidebar-footer form { margin-top: 0.6rem; }
.sidebar-footer button { width: 100%; }
.admin-content { width: min(76rem, calc(100% - 18.5rem)); margin-left: 16.5rem; padding: 3rem 2rem; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.stat-card { display: grid; min-height: 9.5rem; padding: 1.35rem; align-content: space-between; border: 1px solid var(--border); border-radius: 1.2rem; background: linear-gradient(145deg, rgba(26, 22, 34, 0.96), rgba(12, 10, 16, 0.96)); }
.stat-card span, .stat-card small { color: var(--muted); }
.stat-card strong { font-size: clamp(2rem, 4vw, 2.8rem); }
.stat-card.money { background: linear-gradient(145deg, rgba(95, 15, 113, 0.5), rgba(18, 12, 28, 0.98)); }
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 0.95rem 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: left; white-space: nowrap; }
.data-table th { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.data-table td { font-size: 0.86rem; }
.pill { display: inline-flex; padding: 0.28rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.pill.success { color: #b8f7cb; background: rgba(74, 222, 128, 0.12); }
.pill.danger { color: #ffd0d8; background: rgba(251, 68, 100, 0.14); }
.pill.muted { color: var(--muted); background: rgba(255, 255, 255, 0.08); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.current-user { display: block; margin-top: 0.2rem; color: var(--magenta); font-size: 0.7rem; }
.user-actions { display: flex; justify-content: flex-end; gap: 0.45rem; }
.table-button { padding: 0.5rem 0.65rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0.6rem; color: var(--white); background: rgba(255, 255, 255, 0.06); font-size: 0.75rem; font-weight: 750; white-space: nowrap; }
.table-button.danger { border-color: rgba(251, 68, 100, 0.25); color: #ffd0d8; background: rgba(251, 68, 100, 0.1); }
.log-panel + .log-panel { margin-top: 1rem; }
.vehicle-mapping-form select { min-height: 3.65rem; padding-top: 1rem; padding-bottom: 1rem; line-height: 1.35; }
.credential-dialog { width: min(38rem, calc(100% - 2rem)); padding: 1.5rem; border: 1px solid rgba(230, 0, 255, 0.3); border-radius: 1.4rem; color: var(--white); background: linear-gradient(145deg, #1a1622, #0c0a10); box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.7); }
.credential-dialog::backdrop { background: rgba(2, 1, 4, 0.78); backdrop-filter: blur(8px); }
.dialog-heading { display: flex; align-items: center; gap: 0.9rem; }
.dialog-heading img { width: 3.5rem; height: 3.5rem; border-radius: 50%; }
.dialog-heading h2 { margin-top: 0.15rem; }
.dialog-intro { margin: 1rem 0 1.25rem; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.credential-details { display: grid; gap: 0.8rem; }
.credential-details label { margin: 0; }
.credential-value { display: flex; min-height: 3.15rem; margin-top: 0.4rem; padding: 0.85rem 1rem; align-items: center; overflow-wrap: anywhere; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.85rem; color: var(--white); background: rgba(255, 255, 255, 0.055); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; }
.copy-field { display: grid; grid-template-columns: 1fr auto; gap: 0.55rem; align-items: end; }
.copy-field .secondary-button { min-height: 3.15rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 0.7rem; margin-top: 1.25rem; }
.primary-button { padding: 0.75rem 1rem; border-radius: 0.75rem; color: var(--white); background: linear-gradient(135deg, var(--magenta), var(--violet)); font-weight: 800; }
.user-create-panel { margin: 2rem 0 1rem; }
.user-create-form { display: grid; grid-template-columns: minmax(16rem, 1fr) auto; gap: 0.8rem; align-items: end; }
.user-create-form label { margin: 0; }
.user-create-form input { margin-top: 0.45rem; }
.user-create-form button { min-height: 3.15rem; }

@media (max-width: 720px) {
  .metrics { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .dashboard { padding-top: 2rem; }
  .activity-row { grid-template-columns: auto 1fr; }
  .activity-row time { display: none; }
  .app-row { grid-template-columns: 1fr; }
  .app-counts { justify-content: flex-start; }
  .app-counts span { text-align: left; }
  .feature-form { align-items: flex-start; flex-direction: column; }
  .stripe-form { grid-template-columns: 1fr; }
  .vehicle-mapping-form { grid-template-columns: 1fr; }
  .vehicle-mapping-form .secondary-button { grid-column: auto; }
  .admin-shell { display: block; }
  .sidebar { position: static; width: 100%; min-height: auto; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
  .sidebar-nav { grid-template-columns: repeat(2, 1fr); margin-top: 1.25rem; }
  .sidebar-footer { margin-top: 1.25rem; }
  .admin-content { width: 100%; margin-left: 0; padding: 2rem 1rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .user-create-form { grid-template-columns: 1fr; }
  .copy-field { grid-template-columns: 1fr; }
  .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
}