:root{
  --ut-bg: #0b1220;
  --ut-surface: #ffffff;
  --ut-muted: rgba(15,23,42,.65);
  --ut-ink: #0f172a;
  --ut-accent: #0d6efd;
}

body{
  background: radial-gradient(circle at 0% 0%, #f2f7ff 0, #f8fafc 38%, #f5f7fb 100%);
  color: var(--ut-ink);
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", "Noto Sans", sans-serif;
}

.ut-navbar{
  background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
}

.ut-brand{
  display:flex; align-items:center; gap:.6rem;
}
.ut-brand-badge{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-weight:800;
}

.ut-surface{ border-radius:16px; }
.ut-logo{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(13,110,253,.12);
  color: #0b5ed7;
  font-weight:900;
}

.nav-tabs .nav-link{ border-top-left-radius:12px; border-top-right-radius:12px; }

.btn{ border-radius:12px; }
.btn-lg{ border-radius:14px; }

.badge.ut-pill{ border-radius:999px; padding:.4rem .7rem; font-weight:700; }

.table thead th{ white-space:nowrap; }

/* Admin / cards */
.card{ border-radius:16px; }
.list-group-item{ border-color: rgba(0,0,0,.06); }

/* Key/Value blocks */
.ut-kv{ display:flex; flex-direction:column; gap:.55rem; }
.ut-k{ font-size:.82rem; color: rgba(15,23,42,.6); text-transform:uppercase; letter-spacing:.04em; }
.ut-v{ font-weight:600; color:#0f172a; }
.ut-divider{ height:1px; background: rgba(0,0,0,.06); margin: .9rem 0; }

/* Inline action row */
.ut-actions{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; justify-content:flex-end; }

/* Collapse edit panels */
.ut-edit{ background:#fbfcff; border:1px dashed rgba(2,6,23,.18); border-radius:14px; padding:14px; }

/* Member view helpers */
.mv-k{ display:inline-block; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color: rgba(15,23,42,.55); }


.ut-brand-logo{height:28px; width:auto; display:block;}

/* Homepage */
.ut-home-wrap{ max-width: 1080px; margin: 0 auto; }
.ut-home-hero{
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.07);
  background: linear-gradient(140deg, #ffffff 0%, #f7fbff 55%, #eef5ff 100%);
  box-shadow: 0 14px 38px rgba(0,0,0,.05);
  padding: 28px;
}
.ut-home-k{ font-size: .78rem; color: rgba(15,23,42,.58); text-transform: uppercase; letter-spacing: .04em; }
.ut-home-v{ font-weight: 700; color: #0f172a; }
.ut-home-card{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 8px 20px rgba(0,0,0,.04);
  background: #fff;
  padding: 16px;
  height: 100%;
}
.ut-home-photo-wrap{
  position: relative;
  min-height: 320px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 26px rgba(0,0,0,.09);
  background: linear-gradient(145deg, #dde9ff 0%, #f2f7ff 100%);
}
.ut-home-photo{
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}
.ut-home-photo-empty{
  background: linear-gradient(145deg, #dbeafe 0%, #eaf2ff 45%, #f8fbff 100%);
}
.ut-home-lessons{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.07);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
  padding: 18px;
}

@media (max-width: 768px){
  .ut-home-hero{ padding: 18px; border-radius: 16px; }
  .ut-home-photo-wrap, .ut-home-photo{ min-height: 240px; }
}