:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#5b5cff; /* indigo */
  --primary-2:#7c3aed; /* purple */
  --shadow: 0 10px 25px rgba(15,23,42,.08);
  --radius:18px;
}

html,body{height:100%;}
body{
  background: radial-gradient(900px 500px at -10% -10%, rgba(91,92,255,.18), transparent 60%),
              radial-gradient(900px 500px at 110% 0%, rgba(124,58,237,.14), transparent 60%),
              var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{ color: inherit; text-decoration: none; }

/* mobile shell */
.mobile-shell{ max-width: 430px; margin: 0 auto; padding-bottom: 86px; }

/* top app bar */
.topbar{
  position: sticky; top:0; z-index: 1030;
  background: rgba(245,247,251,.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(229,231,235,.7);
}
.brand-dot{
  width:42px;height:42px;border-radius: 14px;
  background: linear-gradient(135deg, rgba(91,92,255,1), rgba(124,58,237,1));
  color:white;
  display:flex;align-items:center;justify-content:center;
  box-shadow: 0 14px 30px rgba(91,92,255,.22);
}
.avatar{
  width:36px;height:36px;border-radius: 999px;
  background: #1118270d;
  border:1px solid rgba(229,231,235,.9);
  display:flex;align-items:center;justify-content:center;
}

/* cards */
.cardx{
  background: var(--card);
  border:1px solid rgba(229,231,235,.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.cardx.soft{
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.cardx.pad{ padding: 14px; }
.cardx.pad-lg{ padding: 16px; }

.muted{ color: var(--muted); }

/* buttons */
.btn-primaryx{
  background: linear-gradient(135deg, rgba(91,92,255,1), rgba(124,58,237,1));
  border: none;
  color: white;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 700;
  box-shadow: 0 14px 28px rgba(91,92,255,.22);
}
.btn-primaryx:hover{ filter: brightness(1.03); color:white; }
.btn-ghostx{
  background: #1118270a;
  border:1px solid rgba(229,231,235,.9);
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 700;
}

/* inputs */
.form-control, .form-select{
  border-radius: 16px;
  border-color: rgba(229,231,235,.9);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(91,92,255,.55);
  box-shadow: 0 0 0 .25rem rgba(91,92,255,.15);
}

/* category tile */
.tile{
  display:flex;align-items:center;gap:12px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(229,231,235,.9);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.tile .ic{
  width:44px;height:44px;border-radius: 16px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(91,92,255,.10);
  color: var(--primary);
}
.tile .title{ font-weight: 800; }
.tile .sub{ color: var(--muted); font-size: .82rem; margin-top: 2px; }

/* gradient card like sample */
.grad-card{
  border-radius: 22px;
  color:white;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(240px 140px at 10% 20%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(91,92,255,1), rgba(124,58,237,1));
  box-shadow: 0 18px 34px rgba(91,92,255,.22);
}
.grad-card .chip{
  display:inline-flex;align-items:center;gap:8px;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  padding:6px 10px;border-radius:999px;font-size:.8rem;
}
.stat-pill{
  display:flex;gap:10px;
}
.stat-pill .pill{
  flex:1;
  background: #fff;
  border:1px solid rgba(229,231,235,.9);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.pill .num{ font-weight: 900; font-size: 1.1rem; }
.pill .lbl{ font-size: .8rem; color: var(--muted); }

/* bottom nav */
.bottom-nav{
  position: fixed; left:0; right:0; bottom: 10px;
  display:flex; justify-content:center;
  z-index: 1030;
}
.bottom-nav .bar{
  width: min(430px, calc(100% - 22px));
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(229,231,235,.9);
  backdrop-filter: blur(14px);
  border-radius: 22px;
  box-shadow: 0 16px 32px rgba(15,23,42,.10);
  padding: 10px 12px;
  display:flex; justify-content:space-between; align-items:center;
}
.nav-item{
  width: 22%;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color: rgba(15,23,42,.60);
  border-radius: 16px;
  padding: 8px 6px;
}
.nav-item.active{
  color: var(--primary);
  background: rgba(91,92,255,.10);
}
.nav-item i{ font-size: 1.2rem; }
.nav-item span{ font-size: .75rem; font-weight: 700; }

/* badges */
.badge-low{ background: rgba(34,197,94,.12); color: #166534; border:1px solid rgba(34,197,94,.25); }
.badge-med{ background: rgba(245,158,11,.14); color: #92400e; border:1px solid rgba(245,158,11,.25); }
.badge-high{ background: rgba(239,68,68,.12); color: #991b1b; border:1px solid rgba(239,68,68,.25); }

/* sections */
.h-title{ font-weight: 900; letter-spacing: -.02em; }