Make HK sidebar menu clearly readable and structured

- Strong, obvious active state: accent-tinted background, bold text,
  accent icon and left accent border so the current section is unmistakable
- Inactive items stay fully readable (white on dark) with a clear hover
- Separate nav sections with dividers and bolder uppercase headers
- Fix invisible mobile hamburger hover (bg-black/10 -> accent tint)

src/app/admin/layout.tsx

@@ -201,10 +201,10 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
         </div>
       </div>
 
-      <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1">
-        {navGroups.map((group) => (
-          <div key={group.label}>
-            <div className="flex items-center gap-1.5 px-2 py-2 text-[0.6rem] font-bold uppercase tracking-[0.12em] text-[var(--admin-sidebar-muted-readable)]">
+      <nav className="flex-1 overflow-y-auto px-3 py-4">
+        {navGroups.map((group, gi) => (
+          <div key={group.label} className={gi > 0 ? "mt-4 pt-4 border-t border-[var(--admin-border)]" : ""}>
+            <div className="flex items-center gap-1.5 px-2 pb-2 text-[0.65rem] font-extrabold uppercase tracking-[0.14em] text-[var(--admin-sidebar-text-readable)] opacity-70">
               {group.icon}
               <span>{group.label}</span>
             </div>