feat: add persistent badges and admin badge page

app/static/css/style.css

@@ -330,7 +330,8 @@ p {
 .task-grid,
 .scoreboard,
 .archive-list,
-.badge-settings {
+.badge-settings,
+.earned-badges-grid {
   display: grid;
   gap: 16px;
 }
@@ -389,6 +390,27 @@ p {
   gap: 8px;
 }
 
+.earned-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: rgba(37, 99, 235, 0.08);
+  color: var(--primary-strong);
+  font-weight: 700;
+}
+
+.earned-badge__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.72);
+}
+
 .status-badge {
   display: inline-flex;
   align-items: center;
@@ -705,6 +727,66 @@ p {
   padding: 18px;
 }
 
+.badge-card {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 14px;
+  align-items: start;
+}
+
+.badge-card--earned {
+  background: rgba(37, 99, 235, 0.03);
+}
+
+.badge-card__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(52, 211, 153, 0.12));
+  color: var(--primary-strong);
+}
+
+.badge-card__icon .nav-icon,
+.badge-card__icon .nav-icon svg {
+  width: 26px;
+  height: 26px;
+}
+
+.badge-card__body {
+  display: grid;
+  gap: 8px;
+}
+
+.settings-tabs {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 6px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(132, 152, 190, 0.18);
+  box-shadow: 0 12px 30px rgba(58, 82, 128, 0.1);
+}
+
+.settings-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 16px;
+  color: var(--muted);
+  font-weight: 700;
+}
+
+.settings-tab.is-active {
+  background: #fff;
+  color: var(--primary-strong);
+  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.08);
+}
+
 .push-box {
   display: grid;
   gap: 18px;
@@ -767,13 +849,14 @@ p {
 
 .bottom-nav {
   position: fixed;
-  left: 14px;
-  right: 14px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(calc(100vw - 52px), 560px);
   bottom: calc(10px + env(safe-area-inset-bottom));
   display: grid;
   grid-template-columns: repeat(6, 1fr);
-  gap: 8px;
-  padding: 10px;
+  gap: 6px;
+  padding: 8px;
   border-radius: 24px;
   background: rgba(255, 255, 255, 0.88);
   backdrop-filter: blur(16px);
@@ -786,13 +869,14 @@ p {
 .nav-link {
   display: grid;
   justify-items: center;
-  gap: 6px;
-  padding: 10px 6px;
+  gap: 5px;
+  padding: 10px 4px;
   color: var(--muted);
   border-radius: 16px;
   text-align: center;
-  font-size: 0.73rem;
+  font-size: 0.69rem;
   font-weight: 700;
+  line-height: 1.1;
 }
 
 .bottom-nav__item.is-active,
@@ -855,7 +939,8 @@ p {
   }
 
   .form-grid--two,
-  .badge-settings {
+  .badge-settings,
+  .earned-badges-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }