feat(frontend): Zibll-like header user box with VIP and admin shortcuts

Restructure logged-in/guest header dropdown into icon action grid, add
message badge, VIP badge, credits row, and admin theme/backend shortcuts.
Guest entry opens dropdown with login/register/reset password actions.

assets/css/frontend/nav/mobile-toggle.css

@@ -669,3 +669,134 @@
   gap: 8px;
 }
 
+
+
+/* ============================================================
+ * Header user box (Zibll-like sub-user-box grid)
+ * ============================================================ */
+.nav-user__toggle {
+  position: relative;
+}
+.nav-user__dot {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-error, #ef4444);
+  border: 2px solid var(--surface-1, #fff);
+}
+.nav-user__guest-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-2);
+  color: var(--color-ink-3);
+}
+.user-dropdown {
+  width: 300px;
+  padding: 14px 12px 12px;
+}
+.user-dropdown__profile.user-info {
+  position: relative;
+  padding-right: 42px;
+}
+.user-dropdown__meta {
+  min-width: 0;
+  flex: 1;
+}
+.user-dropdown__name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.user-dropdown__msg {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  padding: 0 !important;
+  background: var(--surface-2);
+  color: var(--color-ink-3);
+}
+.user-dropdown__msg:hover {
+  background: var(--surface-3);
+  color: var(--color-primary);
+}
+.user-dropdown__msg .user-dropdown__badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  margin: 0;
+}
+.user-dropdown__guest-title {
+  padding: 4px 8px 12px;
+  text-align: center;
+  font-weight: 700;
+  color: var(--color-ink);
+}
+.user-dropdown__actions {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px 4px;
+  padding: 4px 2px 2px;
+}
+.user-dropdown__actions--admin {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.user-dropdown__action {
+  display: flex !important;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px !important;
+  width: auto !important;
+  height: auto !important;
+  min-height: 0;
+  padding: 6px 4px !important;
+  text-align: center !important;
+  font-size: 12px !important;
+  line-height: 1.25;
+  color: var(--color-ink-3) !important;
+  background: transparent !important;
+}
+.user-dropdown__action:hover {
+  background: transparent !important;
+  color: var(--color-primary) !important;
+}
+.user-dropdown__action-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  color: #fff;
+}
+.user-dropdown__action-icon.is-blue { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
+.user-dropdown__action-icon.is-purple { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
+.user-dropdown__action-icon.is-green { background: linear-gradient(135deg, #34d399, #10b981); }
+.user-dropdown__action-icon.is-red { background: linear-gradient(135deg, #f87171, #ef4444); }
+.user-dropdown__action-icon.is-yellow { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1f2937; }
+.user-dropdown__action.is-danger {
+  color: var(--color-error, #ef4444) !important;
+}
+.user-dropdown__credits {
+  margin-top: 2px;
+  border-radius: 12px;
+  background: var(--surface-2);
+  margin-left: 4px;
+  margin-right: 4px;
+  width: auto;
+}