/* ========== ULAHR PURPLE UI SYSTEM ========== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Inter, system-ui, sans-serif;
}


/* Background Gradient */

body {
  min-height: 100vh;

  background: linear-gradient(
    135deg,
    #f3e8ff,
    #ede9fe,
    #e0e7ff
  );

  color: #111827;
}


/* Container */

.container {
  max-width: 420px;
  margin: auto;
  padding: 0 14px;
}


/* ================= HEADER ================= */

header {
  position: sticky;
  top: 0;

  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);

  z-index: 50;

  border-bottom: 1px solid rgba(0,0,0,.05);
}


.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
}


.header-title {
  font-size: 17px;
  font-weight: 600;
}


.header-link {
  color: #6b7280;
  font-size: 24px;
  cursor: pointer;

  transition: all .2s ease;
}


.header-link:hover {
  color: #4f46e5;
}


/* ================= CARDS ================= */

.card {
  background: rgba(255,255,255,0.95);

  border-radius: 18px;

  padding: 18px;

  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}


/* ================= GRID ================= */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}


/* ================= TEXT ================= */

.text-muted {
  font-size: 13px;
  color: #6b7280;
}

.text-title {
  font-size: 20px;
  font-weight: 600;
  margin-top: 4px;
}


/* ================= STATS ================= */

.stat-card {
  background: white;

  border-radius: 14px;

  padding: 14px;

  box-shadow: 0 2px 8px rgba(0,0,0,.05);

  text-align: center;

  transition: all .25s ease;
}


.stat-card:hover {
  transform: translateY(-2px);
}


/* ================= SPACING ================= */

.mt-16 { margin-top: 16px; }
.space-y-16 > * + * { margin-top: 16px; }

/* Header Normal Layout */

.header-wrap{
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.header-title{
 font-size: 17px;
 font-weight: 600;
 position: static;
 transform: none;
 width: auto;
 text-align: left;
}

/* FORCE HEADER LEFT TITLE */

.header-wrap{
 display: grid !important;
 grid-template-columns: auto 1fr auto;
 align-items: center;
}

.header-title{
 justify-self: start !important;
 text-align: left !important;
}

.profile-btn{
 cursor: pointer;
}